Jquery add and remove disable attribute

Question

I'm having some checkboxes and text inputs. The Text inputs are disabled when the pages loads. If a checkbox is checked, the corresponding input should be fillable. Here's my current code

For some reason I can't seem to get it right, I'm pretty new to JS and Jquery. When I click the checkboxes, nothing happens, and when I load the page I get 6 times the text "false"

    var c1 = $('#check1');
    var c2 = $('#check2');
    var c3 = $('#check3');

    var f1 = $('#field1');
    var f2 = $('#field2');
    var f3 = $('#field3');

    $(function() {
        enable_cb(c1, f1);
        enable_cb(c2, f2);
        enable_cb(c3, f3);

        c1.click(enable_cb(c1, f1));
        c2.click(enable_cb(c2, f2));
        c3.click(enable_cb(c3, f3));
    });


    function enable_cb(checkbox, field) {
        if (checkbox.checked) {
            console.log('if');
            field.removeAttr("disabled");
        } else {
            console.log('else');
            field.attr("disabled", true);
        }
    }

Here's a piece of html, the other parts look the same as this one:

<div class="form-group" >
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect customcheckbox" for="check1">
        {{ Form::checkbox('check', 1, null, ['class' => 'mdl-checkbox__input', 'id' => 'check1']) }}
        <span class="mdl-checkbox__label">test</span>
    </label>
</div>
<div class="form-group" >
    <label for="field1">test<br></label>
    <select id="field1" name="field1" disabled class="searchselect searchselectstyle">
    </select>
    @if ($errors->has('field1'))
        <span class="help-block">
            <strong>{{ $errors->first('field1') }}</strong>
        </span>
    @endif
</div>

Check [this Question at stackoverflow](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) to better understand how to deal with enabling and disabling inputs. — hmd, Apr 06 '16 at 14:52

Rory McCrossan · Accepted Answer · 2016-04-06T15:00:35.017

You have several issues.

You should use the change event when dealing with checkboxes so that people who navigate with the keyboard can use them.
You should provide an anonymous function to the event handler. You current code is immediately executing the enable_cb() function and then ignoring any further events.
The checkbox parameter passed to the function is a jQuery object which has no checked property. You should use is(':checked') instead.
You should use prop() over attr() and removeAttr() where possible.

Try this:

$(function() {
    enable_cb(c1, f1);
    enable_cb(c2, f2);
    enable_cb(c3, f3);

    c1.change(function() {
        enable_cb(c1, f1)
    });
    c2.change(function() {
        enable_cb(c2, f2)
    });
    c3.change(function() {
        enable_cb(c3, f3)
    });
});

function enable_cb(checkbox, field) {
    if (checkbox.is(':checked')) {
        console.log('if');
        field.prop("disabled", false);
    } else {
        console.log('else');
        field.prop("disabled", true);
    }
}

Working example

That said, you should really look to DRY up your code to reduce repetition. Exactly how you do this depends on your HTML structure, but here's an example.

<div class="checkbox-group">
    <input type="checkbox" id="check" />
    <input type="text" id="subcomplex"/>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlymanagermaintainancedayscheck" />
    <input type="text" id="yearlymanagermaintainancedays" />
</div>
<div class="checkbox-group">
    <input type="checkbox" id="yearlysuppliermaintainancedayscheck" />
    <input type="text" id="yearlysuppliermaintainancedays" />
</div>

$('.checkbox-group :checkbox').change(function() {
    $(this).siblings('input').prop('disabled', !this.checked);
}).change();

Working example

Note how much simpler the code is for the latter version, and how the JS will require no updates or maintenance no matter how many input elements you add to the HTML.

Thank you so much! It's working great now. I'm very new to JS so this helped me a lot. — Markinson, Apr 06 '16 at 14:59

score 1 · Answer 2 · answered Apr 06 '16 at 14:50

If you need to toggle a property using jQuery, you can use the prop() function, which you could use to toggle the disabled property :

$(yourElement).prop('disabled',!checkbox.checked);

which in your case might look something like :

function enable_cb(checkbox, field) {
    $(field).prop('disabled',!checkbox.checked);
}

Jquery add and remove disable attribute

2 Answers2