Question

基本上我有一个四个HTML复选框的形式。如果有价值的那个＆＃34;一个＆＃34;勾选我要禁用有价值的那个＆＃34;两个＆＃34;反之亦然。其余复选框正常运行。

我差点把它拿到那里但是当我取消盒子时，它再也没有重新启用另一个。

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

＆＃13;

$( "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 );
    }
  }

	});

＆＃13;

<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>

＆＃13;

Answer 2

您需要使用复选框的当前状态。为此，您可以使用 this page 功能以及标记:checked

此备选方案使用 $.is() 缩短版本。

使用 data-attribute ，您不会混淆值和逻辑来禁用/启用其他复选框。因此，复选框可以处理任何值，从而避免在禁用/启用逻辑中进行修改。

＆＃13;

// 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'));
});

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用$(this).is(":checked")分配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

我差点把它拿到那里但是当我取消盒子时，它不再重新启用另一个。

您尚未在处理程序中处理此案例，所有对prop的调用都使用true作为值（例如，它们都已禁用）。

相反，在选中当前复选框时使用this.checked来使用true，或者在不选中时使用false：

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

我们也可以缩短一点，因为两个分支完全相同，只是使用不同的选择器：

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

或者我们甚至可以这样做，以便HTML使用data-*属性定义复选框之间的关系：

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

（注意：你也可以在这里使用data，但除非你需要它添加的附加功能，否则没有理由。不只是data-*属性的访问者;它的数量越来越少。）

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 );
    }
});

这将做魔术

注意：你应该传递e - 事件参数，并检查其状态e.target.checked

使用jQuery启用和禁用复选框

5 个答案: