Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make textbox enable and disable on change using JQuery

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();
    });
});
like image 668
Pallavi Avatar asked Dec 18 '13 17:12

Pallavi


People also ask

How check TextBox is enabled or disabled in jQuery?

You can use $(":disabled") to select all disabled items in the current context. To determine whether a single item is disabled you can use $("#textbox1").is(":disabled") . Save this answer.

How do I disable a TextBox?

Disable the TextBox by adding the e-disabled to the input parent element and set disabled attribute to the input element.

How do you make a text box readonly in jQuery?

To make a textarea and input type read only, use the attr() method .

How add and remove disabled property in jQuery?

To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.


1 Answers

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();
    });
});
like image 115
Trevor Avatar answered Nov 01 '22 13:11

Trevor