I have piece of html code as well as script code. I need solution to handle on change event of one text box that disable act of inputting data in another text field. Could any one help me in regarding.

<div id="cca" class="leaf">
 <label class="control input text" title="">
    <span class="wrap">cca</span>
     <input class="" type="text" value="[Null]"/>
    <span class="warning"></span>
 </label>
</div>
<div id="ccit" class="leaf">
 <label class="control input text" title="">
    <span class="wrap">ccit</span>
     <input class="" type="text" value="[Null]"/>
    <span class="warning"></span>
 </label>
</div>

$(document).ready(function () {        
    alert("hello");        
    $("#cca").on('change', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        $("ccit").prop('disabled',true);
        event.preventDefault();
    });
});

I have piece of html code as well as script code. I need solution to handle on change event of one text box that disable act of inputting data in another text field. Could any one help me in regarding.

<div id="cca" class="leaf">
 <label class="control input text" title="">
    <span class="wrap">cca</span>
     <input class="" type="text" value="[Null]"/>
    <span class="warning"></span>
 </label>
</div>
<div id="ccit" class="leaf">
 <label class="control input text" title="">
    <span class="wrap">ccit</span>
     <input class="" type="text" value="[Null]"/>
    <span class="warning"></span>
 </label>
</div>

$(document).ready(function () {        
    alert("hello");        
    $("#cca").on('change', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        $("ccit").prop('disabled',true);
        event.preventDefault();
    });
});

• javascript
• jquery
• html
• jsp

• 2 What isn't working? Could it be that you don't have a <ccit></ccit> element ? – adeneo Commented Dec 18, 2013 at 18:00
• Hi, this is my html code which i have written to make that script to perform action <div id="cca" class="leaf"> <label class="control input text" title=""> <span class="wrap">cca</span> <input class="" type="text" value="[Null]"/> <span class="warning"></span> </label> </div> <div id="ccit" class="leaf"> <label class="control input text" title=""> <span class="wrap">ccit</span> <input class="" type="text" value="[Null]"/> <span class="warning"></span> </label> </div> – Pallavi Commented Dec 18, 2013 at 18:02
• Now that you've posted the HTML, it should be $("#ccit"), hence my first comment – adeneo Commented Dec 18, 2013 at 18:02
• the event.returnValue is deprecated. please use the standard event.preventDefault() instead is just a warning on an old version of jQuery but it is not the reason your code is not working.. Javascript is a client side language so I don't understand what you mean by its not working server side. Sorry I don't know how to help you at this point unless you can demonstrate exactly what is not working. – Trevor Commented Dec 19, 2013 at 13:46
• @ThotaPallavi try my Update 2 that is the last thing I can think of. – Trevor Commented Dec 19, 2013 at 16:16

3 Answers 3

For one you were missing # on your $("ccit")

$(document).ready(function () {        
    alert("hello");        
    $("#cca").change(function(){
        alert('I am pretty sure the text box changed');
        $("#ccit").prop('disabled',true);
        event.preventDefault();
    });
});

http://jsfiddle.net/qS4RE/

Update

$(document).ready(function () {               
    $("#cca").on('change', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        $("#ccit").find('label.control input').prop('disabled',true);
        event.preventDefault();
    });
});

http://jsfiddle.net/qS4RE/1/

Update 2

$(document).ready(function () {               
    $(document).on('change', '#cca label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        $("#ccit").find('label.control input').prop('disabled',true);
        event.preventDefault();
    });
});

$("#ccit").attr('disabled','disabled');

You can also use attr on the line $("ccit").attr('disabled',true);

if prop gives you an error