jQuery禁用某些類的複選框，一旦選中其中一個

因此，我有一些PHP代碼正在吐出阿凡達的複選框。然而，該人只能選擇他們畫廊中的一個圖像作爲他們的頭像。但是，當他們檢查其中一個框時，我希望能夠禁用所有其他框。我似乎無法弄清楚這一點。嘗試了很多不同的東西，所以我想我會問具體的代碼。jQuery禁用某些類的複選框，一旦選中其中一個

echo 'Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="'.$galleryid.'" /><br />';

所以我想要的是如果用戶檢查任何複選框，有一類成員頭像。我想禁用其他具有memberavatar類的複選框。

一些示例HTML輸出，所以你可以看到它是如何被瀏覽器renedered

<form action="/members/members_gallery.php" method="post" id="memberdetail"> 
<div style="width:150px; height:200px; float:left; margin:0; padding:0; border:0;"> 
    <a href="../site/images/gallery/users/[email protected]/1390202957-20130816_193346.jpg" target="_blank"> 
     <img src="../site/images/gallery/users/[email protected]/1390202957-20130816_193346.jpg" style="width:150px; height:150px; margin:0; border:0; padding:0;"> 
    </a> 
    <br>Is Public: <input type="checkbox" name="galleryid[]" value="5"> 
    <br>Members: <input type="checkbox" name="membersview[]" value="5" checked="checked"> 
    <br>Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="5"> 
    <br>Delete: <input type="checkbox" name="deletepic[]" value="5"> 
    <br> 
</div> 
<div style="width:150px; height:200px; float:left; margin:0; padding:0; border:0;"> 
    <a href="../site/images/gallery/users/[email protected]/1390203939-240_screenshots_2014-01-19_00001.jpg" target="_blank"> 
     <img src="../site/images/gallery/users/[email protected]/1390203939-240_screenshots_2014-01-19_00001.jpg" style="width:150px; height:150px; margin:0; border:0; padding:0;"> 
    </a> 
    <br>Is Public: <input type="checkbox" name="galleryid[]" value="7" checked="checked"> 
    <br>Members: <input type="checkbox" name="membersview[]" value="7" checked="checked"> 
    <br>Avatar: <input type="checkbox" name="membersview[]" class="memberavatar" value="7"> 
    <br>Delete: <input type="checkbox" name="deletepic[]" value="7"><br></div><div class="cl"> 
</div> 
<br><br> 
<input type="submit" name="galleryupdatepics" value="Update Pics" style="float:left">

來源

2014-02-12 GrafixMastaMD

你所要求的更像是「單選按鈕」的操作，所以我建議你考慮使用更自然的控件來進行這種操作。 –

事情是這樣的 -

$function(){ 
    $('.memberavatar').click(function(){ 
      $('.memberavatar').not(this).each(function(){ 
       $(this).prop("disabled", true); 
      }); 
    }); 
});

的jsfiddle例子 - http://jsfiddle.net/wzNdL/

UPDATE
模仿RadioGroup中，但只有在第一次是 '選中'，嘗試這樣的事情 -

$(function(){ 
    $('.memberavatar').click(function(){ 
     if($(this).is(':checked')){ 
       $('.memberavatar').not(this).each(function(){ 
        $(this).prop("disabled", true); 
       }); 
     } 
     else { 
       $('.memberavatar').prop("disabled", false); 
     } 
    }); 
});

的jsfiddle - http://jsfiddle.net/wzNdL/4/

來源

2014-02-12 00:37:27 Sean

這是最接近的。但是，如果我取消選中，則不會將其餘部分切換爲啓用狀態。你能幫助寫一個快速的if語句來幫助切換嗎？ – GrafixMastaMD

我已更新檢查是否（'：'檢查'），如果不是刪除'禁用'道具。 – Sean

謝謝先生。這工作perfetly。 - 並感謝所有您的建議，並採取時間出你的一天，以幫助其他人:) – GrafixMastaMD

線沿線的東西：

$('.memberavatar').click(function(event) { 
    $('.memberavatar').prop('disabled', true); 
    $(event.target).prop('checked',true); 
});

小提琴：http://jsfiddle.net/5K8L6/

當然在這種情況下，使用單選按鈕而不是複選框會更有意義

來源

2014-02-12 00:38:43 ioseph

我同意百分之百。不過，我沒有選擇，我的老闆喜歡複選框的外觀。所以...猴子做老闆說什麼哈哈 – GrafixMastaMD

你確定要禁用所有其他複選框嗎？添加到這個答案，你會想添加邏輯重新啓用所有其他人，當選中的一個未選中。 – ioseph

這會很好地工作。

代碼：

$("input:checkbox.memberavatar").click(function() { 
    $(':checkbox').not($(this)).attr('checked', false); 
});

的jsfiddle：http://jsfiddle.net/gqPmw/2/

來源

2014-02-12 00:43:05

你可以這樣做：

$(function(){ 
    $('.memberavatar').click(function(){ 
    $('.memberavatar').not(this).each(function(){ 
    $(this).attr('checked', false); 
    }); 

});

但是，正如你已經告訴你最好使用單選按鈕。上面的函數簡單地使得某些類的複選框代表單選按鈕。

來源

2014-02-12 00:53:46

jQuery禁用某些類的複選框，一旦選中其中一個

回答

相關問題