CODEWITHSUNDEEP
jquerycheckbox
TheWebs
TheWebs

Reputation: 12923

Checkboxes disabled and enabled

I am looking to make a (by default) disabled check box enabled only if and when another check box is checked. This allows me to check the newly enabled check box. The catch is on form submission the check box should stay enabled if the other is checked.

<input type="checkbox" class="checkbox1" id="checkbox1" name="vehicle" value="Bike">I am enabled and must be clicked<br>
<input type="checkbox" class="checkbox2" id="checkbox2" name="vehicle" value="Car" disabled>I am waiting to be enabled

I am looking to do with jquery, I don't have any jquery code to show cause I have no idea where to start.

Upvotes: 0

Views: 237

Answers (2)

j08691
j08691

Reputation: 207901

If you need the second checkbox to become disabled after the first checkbox is unchecked, use this:

$('#checkbox1').click(function () {
    $('#checkbox2').prop('disabled', !$(this).is(':checked'));
});

jsFiddle example

otherwise just use this:

$('#checkbox1').click(function () {
    $('#checkbox2').prop('disabled', false);
});

jsFiddle example

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

You can use the change function to see when box was checked, and logic from there to enable and disable.

$("#checkbox1").change(function() {
    if (this.checked) {
        $("#checkbox2").prop("disabled", false);
    }
    else {
        $("#checkbox2").prop("disabled", true);
    }
});

Upvotes: 1

Related Questions