javascript - 使用 jQuery 启用和禁用复选框

Question

基本上我有一个由四个 HTML 复选框组成的表单。如果勾选了值为“一”的选项，我想禁用值为“二”的选项，反之亦然。其余复选框正常运行。

我几乎已经完成了，但是当我取消选中该框时，它不会再次重新启用另一个框。

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>

脚本

$( "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

这应该对您有用: 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>