CODEWITHSUNDEEP
javascriptjquerycheckbox
tin tin
tin tin

Reputation: 372

Disabling checkboxes based on condition

I have 3 checkboxes say checkbox A, checkbox B, checkbox C. I have a requirement something like

  1. If checkbox A is checked, then checkboxes B and C should be disabled.
  2. I can check both checkboxes B and C simultaneously in which case checkbox A should be disabled.
  3. Upon selecting checkbox B or Checkbox C alone (single selection), in either of the case, Checkbox A should be disabled.

Below is my code:

$("#B").change(function(){
    if($("#B").is(':checked'))
    {
      $("#A").attr("disabled", true);
    }
    else
    {
      $("#A").attr("disabled", false);
      $("#B").attr("disabled", false);
      $("#C").attr("disabled", false);
    }
  });

  $("#C").change(function(){
    if($("#C").is(':checked'))
    {
      $("#A").attr("disabled", true);
    }
    else
    {
      $("#A").attr("disabled", false);
      $("#B").attr("disabled", false);
      $("#C").attr("disabled", false);
    }
  });

  $("#A").change(function(){
    if($("#A").is(':checked'))
    {
      $("#B").attr("disabled", true);
      $("#C").attr("disabled", true);
    }
    else
    {
      $("#A").attr("disabled", false);
      $("#B").attr("disabled", false);
      $("#C").attr("disabled", false);
    }
  });

Can anyone please help me with this

Upvotes: 0

Views: 2587

Answers (1)

TechGirl
TechGirl

Reputation: 488

You need to update your conditions: JSFIDDLE

$("#B").change(function () {
    if ($("#B").is(':checked')) {
        $("#A").attr("disabled", true);
    } else {
        if ($("#C").is(':checked')) {
            $("#A").attr("disabled", true);
        } else {
            $("#A").attr("disabled", false);
            $("#B").attr("disabled", false);
            $("#C").attr("disabled", false);
        }
    }
});

$("#C").change(function () {
    if ($("#C").is(':checked')) {
        $("#A").attr("disabled", true);
    } else {
        if ($("#B").is(':checked')) {
            $("#A").attr("disabled", true);
        } else {
            $("#A").attr("disabled", false);
            $("#B").attr("disabled", false);
            $("#C").attr("disabled", false);
        }
    }
});

$("#A").change(function () {
    if ($("#A").is(':checked')) {
        $("#B").attr("disabled", true);
        $("#C").attr("disabled", true);
    } else {
        $("#A").attr("disabled", false);
        $("#B").attr("disabled", false);
        $("#C").attr("disabled", false);
    }
});

Upvotes: 2

Related Questions