使用jQuery啟用和禁用復選框

Question

基本上，我有四個HTML復選框的形式。 如果勾選“ 1”值，我想禁用“ 2”值，反之亦然。 其余復選框正常運行。

我幾乎已經到了那里，但是當我取消選中該框時，它不會再次啟用另一個。

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

  }

    });

小提琴鏈接

Answer 1

這應該為我們工作： Fiddle鏈接

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

您需要使用復選框的當前狀態。 為此，您可以使用$.is()函數以及標志:checked

此替代方法使用data-attribute來使其更短。

使用data-attribute您不會混淆值和禁用/啟用其他復選框的邏輯。 因此，復選框可以處理任何值，從而避免在禁用/啟用邏輯中進行修改。

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

您可以使用$(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