jQuery取消選中複選框不起作用

在StackOverflow上嘗試多個示例來解決我的問題後，我仍然無法弄清我的問題。jQuery取消選中複選框不起作用

我有3個複選框：

<input id="pets_dog" class="text" type="checkbox" class="pets" name="pets[]" value="pets_dog"> Dogs</input> 
<input id="pets_cats" class="text" type="checkbox" class="pets" name="pets[]" value="pets_cats"> Cats</input> 
<input id="pets_none" class="text" type="checkbox" class="pets" name="pets[]" value="pets_no"> None</input>

當「pets_none」被選中，我需要其他2個複選框取消選中，反之亦然。這裏是我目前的jQuery代碼：

 $("#pets_none").change(function() { 
      if($("#pets_none").attr('checked')) { 
      $("#pets_cats").removeAttr('checked'); 
      $("#pets_dogs").removeAttr('checked'); 
      } 
     });

我無法弄清楚爲什麼我的生活不工作，並感謝任何幫助。

來源

2012-06-16 stoopkid1

你不應該有指定的2類的屬性，因爲這是無效的HTML。擁有2個類屬性還可以防止你通過'pets'類來選擇你的輸入。 I.e：'$（。pets）'不會工作，因爲'.text'優先。如果你想要分配2個班級，就像這樣'class =「text pets」' – Nope

您的html應該是

<input id="pets_dog" class="text pets" type="checkbox" name="pets[]" value="pets_dog" /> Dogs 
<input id="pets_cats" class="text pets" type="checkbox" name="pets[]" value="pets_cats" /> Cats 
<input id="pets_none" class="text pets" type="checkbox" name="pets[]" value="pets_no" /> None

$(function(){ 
    $("#pets_none").on('change', function(e) { 
     if($(this).is(':checked')) { 
      $("#pets_dog").attr('checked', false); 
      $("#pets_cats").attr('checked', false); 
     } 
    }); 
});

DEMO.

更新： 您已經使用類屬性的兩倍，它應該是如下

<input id="pets_dog" type="checkbox" class="pets text" name="pets[]" value="pets_dog" /> Dogs 
<input id="pets_cats" type="checkbox" class="pets text" name="pets[]" value="pets_cats" /> Cats 
<input id="pets_none" type="checkbox" class="text pets" name="pets[]" value="pets_no" /> None

個JS

$(function(){ 
    $(".pets").on('change', function(e) { 
     var el=$(this); 
     if(el.is(':checked') && el.attr('id')=='pets_none') { 
      $(".pets").not(el).attr('checked', false); 
     } 
     else if(el.is(':checked') && el.attr('id')!='pets_none') 
     { 
      $("#pets_none").attr('checked', false); 
     } 
    }); 
});

DEMO.

來源

2012-06-16 19:51:06

@ Sheikh感謝您發佈DEMO測試代碼 – stoopkid1

@ stoopkid1，最歡迎:-) –

@ stoopkid1，檢查更新，謝謝。 –

使用.prop()方法：

... 

$("#pets_cats").prop('checked', false); 
$("#pets_dogs").prop('checked', false); 

...

，並檢查#pets_none是否被選中，使用這種方法太：

$("#pets_none").prop('checked');

來源

2012-06-16 19:38:24 gvl

我已經試過了，仍然無濟於事。在這一點上，我認爲另一個功能可能會搞亂這個功能。 – stoopkid1

可以使用prop方法：

$("#pets_none").change(function() { 
    if (this.checked) { 
     $("#pets_cats, #pets_dog").prop('checked', false); 
    } 
});

來源

2012-06-16 19:41:51 undefined

這工作完美。非常感謝你。 – stoopkid1

var checked = $(this).find('Enable').text().toLowerCase(); 
$("#chk__Enable").each(function() { 
    if (checked == 'true') { 
     $(this).attr('checked', 'checked'); 
    } else { 
     $(this).removeAttr('checked'); 
    } 
});

來源

2013-07-11 06:07:20 wonna

我知道prop是使用更新版本jQuery的方法。然而，這個答案適用於我的道具沒有（特別是對於IE9）。使用attr/removeAttr適用於我的應用程序的IE9和IE10渲染。 –

jQuery取消選中複選框不起作用

回答

相關問題