How to make text box enable and disable in jquery [duplicate]

Question

I have written a sample code of html and script as follows: When i execute this code first i will get that alert hello but other alert when i change at cca by pressing tab button then it is not showing alert. How to use that text box and enable and disable other text fields of it.

HTML:

<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>

JS:

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

Answer 1

I'm not really sure what you are trying to do but I can help get the alert working. You are basically not using jQuery "on" function correctly.

$('#thisNeedsToBeContainer').on('focusout', '#elemToBindEventTo', function (event)....

One of the following will do what you need:

This will fire when text box is left

$(document).ready(function () {      

    alert("hello");        
    $("#cca").on('focusout', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        event.preventDefault();
    });
});

This, will fire on change

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

This, will fire on keyup as typing

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

See Demo on JsFiddle

You should also close your input:

<input class="" type="text" value="[Null]"/>