Search code examples
jqueryinputdisabled-input

Enable/disable input field after second click


First I display a div container with disabled input fields.

$("#button").click(function() {
    $(".disable-input").prop('disabled', true);
})

And with a second button inside the displayed div container I want to enable the change for input fields after the first click and after the second one the enabled input fields should be disabled. For example: Display my customers via div container and inside this div container I can change them with a click on the button. What is my mistake?

var count = 0;
    if(count == 0) {
         $("#edit").click(function(){
            $(".disable-input").prop('disabled', false);})  
            count = 1;
    }
    if(count == 1) {
         $("edit").click(function(){
                $(".disable-input").prop('disabled', true);})
                count = 0;
    }

Solution

  • Use attr('disabled', 'disabled') and removeAttr('disabled') to do this

    var count = 0;
        if(count == 0) {
             $("#edit").click(function(){
                $(".disable-input").attr('disabled', 'disabled');
                count = 1;
             });
        }
        if(count == 1) {
             $("edit").click(function(){
                 $(".disable-input").removeAttr('disabled');
                 count = 0;
             });
        }
    

    The reason is that the presence of the 'disabled' attribute (regardless of value) on an input element is enough to cause the input to be disabled, whatever the value - i.e

    <input type="text" disabled="false" />
    

    ...is disabled.