使用jQuery启用和禁用复选框

Question

basically I have a form of four HTML checkboxes. If the one with value "one" is ticked I want to disable the one with value "two" and visa versa. The rest of the checkboxes operate as normal.

I've almost got it there but when I untick the box it doesn't re-enable the other again.

HTML

<form>

<input type="checkbox" name="product[]" value="one">

<input type="checkbox" name="product[]" value="two">

<input type="checkbox" name="product[]" value="three">

<input type="checkbox" name="product[]" value="four">

</form>

Script

$( "input" ).change(function() {
  var val = $(this).val();

    if(val == "one") {

     $("input[value='two']").prop( "disabled", true );

  }

  else if(val== "two") {

    $("input[value='one']").prop( "disabled", true );

  }

    });

Fiddle link

Answer 1

This should work our for you: Fiddle Link

 $( "input" ).change(function() { var val = $(this).val(); if(val == "one") { if(!$("input[value='two']").is('[disabled]')){ $("input[value='two']").prop( "disabled", true ); }else{ $("input[value='two']").prop( "disabled", false ); } } else if(val== "two") { if(!$("input[value='one']").is('[disabled]')){ $("input[value='one']").prop( "disabled", true ); }else{ $("input[value='one']").prop( "disabled", false ); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" name="product[]" value="one"> <input type="checkbox" name="product[]" value="two"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> 

Answer 2

You need to use the current state of the checkbox. To accomplish that, you can use the function $.is() along with the flag :checked

This alternative uses data-attribute to make it shorter.

With data-attribute you're not mixed up the values and the logic to disable/enable other checkboxes. Therefore, the checkboxes can handle any values avoiding modifications in your disable/enable logic.

 // This way, you're separating the disable/enable logic. $("input").change(function() { var target = $(this).data('target'); if (target) $("input[data-disenable='" + target + "']").prop("disabled", $(this).is(':checked')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" name="product[]" data-disenable='1' data-target='2' value="one"> <input type="checkbox" name="product[]" data-disenable='2' data-target='1' value="two"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> 

Answer 3

You can use $(this).is(":checked") to assign on prop("disabled"..

 $(function() { $('input').change(function() { var val = $(this).val(); if (val == "one") { $("input[value='two']").prop("disabled", $(this).is(":checked")); } else if (val == "two") { $("input[value='one']").prop("disabled", $(this).is(":checked")); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="checkbox" name="product[]" value="one"> <input type="checkbox" name="product[]" value="two"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> 

Answer 4

I've almost got it there but when I untick the box it doesn't re-enable the other again.

You haven't handled that case in your handler, all of your calls to prop use true as the value (eg, they all disable).

Instead, use this.checked to use true when the current checkbox is checked, or false when it isn't:

 $("input").change(function() { var val = $(this).val(); if (val == "one") { $("input[value='two']").prop("disabled", this.checked); } else if (val == "two") { $("input[value='one']").prop("disabled", this.checked); } }); 

 <form> <input type="checkbox" name="product[]" value="one"> <input type="checkbox" name="product[]" value="two"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

We can also make that a bit shorter, since the two branches do exactly the same thing, just with different selectors:

 $("input").change(function() { var val = $(this).val(); if (val === "one" || val === "two") { var other = val == "one" ? "two" : "one"; $("input[value='" + other + "']").prop("disabled", this.checked); } }); 

 <form> <input type="checkbox" name="product[]" value="one"> <input type="checkbox" name="product[]" value="two"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Or we could even do it so that the HTML defines the relationship between the checkboxes using a data-* attribute:

 $("input").change(function() { var other = $(this).attr("data-disable"); if (other) { $("input[value='" + other + "']").prop("disabled", this.checked); } }); 

 <form> <!-- NOTE the data-disable attributes --> <input type="checkbox" name="product[]" value="one" data-disable="two"> <input type="checkbox" name="product[]" value="two" data-disable="one"> <input type="checkbox" name="product[]" value="three"> <input type="checkbox" name="product[]" value="four"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

(Note: You could also use data here, but there's no reason to unless you need the additional features it adds. It's not just an accessor for data-* attributes; it's both more and less than that.)

Answer 5

$( "input" ).change(function(e) {
    var val = $(this).val();
    if(val == "one") {
        $("input[value='two']").prop( "disabled", e.target.checked );
    }

    else if(val== "two") {
        $("input[value='one']").prop( "disabled", e.target.checked );
    }
});

this will do the magic

pay attention: you should pass e - event argument, and check its state e.target.checked