<div class="span1">
     <input type="checkbox" value="l4" id="l4" field="" defaultValue="" appEditor="true"/>
</div>

<div class="span7">
     <input type="text" class="m-wrap span10" id="fld_l4" defaultValue="" editType="intEdit" appEditor="true" disabled />
</div>

What I want to do is, If checkbox is checked, remove disabled in the fld_l4.

How to do this with using Prototype.js or jQuery?

EDIT: I'm using prototype with jQuery i'm getting an error: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. By the way i replaced $ with jQuery for conflicts

EDIT2 : Solved.

this.l4     = editor.instance;
editor.observe(iconstants.KEY_CHANGE,this.levelCheckboxChanged.bindAsEventListener(this))

Inside levelCheckboxChanged:

levelCheckboxChanged: function(e) {

    if($("l4").checked == false) {
        $("fld_l4").disabled = true;
    } else {
        $("fld_l4").disabled = false;
    }
},

<div class="span1">
     <input type="checkbox" value="l4" id="l4" field="" defaultValue="" appEditor="true"/>
</div>

<div class="span7">
     <input type="text" class="m-wrap span10" id="fld_l4" defaultValue="" editType="intEdit" appEditor="true" disabled />
</div>

What I want to do is, If checkbox is checked, remove disabled in the fld_l4.

How to do this with using Prototype.js or jQuery?

EDIT: I'm using prototype with jQuery i'm getting an error: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. By the way i replaced $ with jQuery for conflicts

EDIT2 : Solved.

this.l4     = editor.instance;
editor.observe(iconstants.KEY_CHANGE,this.levelCheckboxChanged.bindAsEventListener(this))

Inside levelCheckboxChanged:

levelCheckboxChanged: function(e) {

    if($("l4").checked == false) {
        $("fld_l4").disabled = true;
    } else {
        $("fld_l4").disabled = false;
    }
},

• javascript
• jquery
• prototypejs

• Check this out if you want to toggle disabled jsfiddle/Alfie/suB2N – Anton Commented Oct 7, 2013 at 10:55

5 Answers 5

You can do it like this

$('#l4').change(function(){
if(this.checked){
$("#fld_l4").removeAttr('disabled');
 }    
})

Demo Link

This way should work:

$("#l4").on("change", function () {
    $("#fld_l4").prop("disabled", !$(this).is(":checked"));
});

jsFiddle: http://jsfiddle/J5Nt2/1/

Here is the way to do this with PrototypeJS

inside of your DOM loaded event

document.observe('dom:loaded',function(){

    $('l4').observe('click',function(){
        $('fld_l4').writeAttribute('disabled',this.checked);
    });

});

Plus you might want to change the id of '14' browsers do not like you starting id's with numbers - they let you do it but it is not part of the HTML spec

Try this,

if( $("#l4:checked").length ) {
    $("#fld_l4").removeAttr("disabled");
}

Try this:

if( $("#l4").is(":checked") ) {  
   $('#fld_l4').removeAttr('disabled');
}