CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Matthew
Matthew

Reputation: 2246

Disable checkbox if the other isn't checked jQuery

I need to have at least one checkbox always checked. Both can be checked at the same time, but I need at least one to be always checked.

I attempted to do this w/ the code below. The idea is to check if the checkbox isn't checked, and add a disabled property to the other checkbox.

So for example...

If letters isn't checked, check numbers and disable it so user cannot uncheck it. 

if (letters.checked === false) { // if letters isn't checked
    numbers.prop("disabled", true); // disable numbers
    numbers.checked = true; // keep numbers checked
} else if (numbers.checked === false) { // else if numbers isn't checked
    letters.prop("disabled", true); // disable letters
    letters.checked = true; // keep letters checked
}

Fiddle

Upvotes: 0

Views: 565

Answers (2)

Mike Bell
Mike Bell

Reputation: 1386

You're going to need to put that logic into an event handler if you want it to fire every time the checked states change. Currently, it only runs on $(document).ready and never runs after that.

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Like this you mean :) working demo: http://jsfiddle.net/Y3dC3/

  • I have added .on change event.
  • Also you can use .is checked for checking if it is checked or not.

Hope this fits your needs.

code

$(document).ready(function () {

    $('input[type=checkbox]').change(function () {
        var letters = $("#letters"),
            numbers = $("#numbers");

        if (!letters.is(':checked')) { // if letters isn't checked
            numbers.prop("disabled", true); // disable numbers
            numbers.checked = true; // keep numbers checked
        } else if (!numbers.is(':checked')) { // else if numbers isn't checked
            letters.prop("disabled", true); // disable letters
            letters.checked = true; // keep letters checked
        }
    });
});

Upvotes: 2

Related Questions