基於前兩個使用jquery的狀態控制第三個複選框

我有三個複選框，需要禁用第三個，如果其中任何一個和/或其他兩個被選中。我確信有一種比我目前更簡單的方法。它變成了我認爲是一團糟的東西，我希望有更多jQuery知識的人可以在這裏發光。基於前兩個使用jquery的狀態控制第三個複選框

這裏是我的簡單的HTML表單：

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script src="custom.js" type="text/javascript"></script> 
</head> 
<body> 
     <input type="checkbox" class="class" id="1">First 
     <input type="checkbox" class="class" id="2">Second 
     <input type="checkbox" class="class" id="3">Third 
    </body> 
</html>

下面是我使用的JavaScript與jQuery 5.0上

jQuery(document).ready(function() { 
// watches the events of all checkboxes 
$(":checkbox").click(function(){ 
if(
    // if both 1 and 2 are checked we don't want to enable Third until both are unchecked. 
    (($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))|| 
    ((($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))|| 
    ((($('#1:checkbox').attr('checked'))||($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled'))) 
){ 
    // we don't want to do anything in the above events 
} else if( 

    // handles the First check box 
    (($('#1:checkbox').attr('checked'))||(!$('#1:checkbox').attr('checked')))|| 
    // handles the Second check box 
    (($('#2:checkbox').attr('checked'))||(!$('#2:checkbox').attr('checked'))) 

){ 
// call the disableThird function 
disableThird(); 
} 
}); 

// handles enabling and disabling the Third checkbox 
function disableThird(){ 
    var $checkbox = $('#3:checkbox'); 
    $checkbox.attr('disabled', !$checkbox.attr('disabled')); 
}; 
});

出於某種原因，檢查＃3將禁用它的自我。我不明白爲什麼。

這是有效的，但其中一個要求是非程序員應該能夠編輯和維護它。理想情況下，如果他可以添加新的複選框到HTML，它會很好，它會工作。這些類是定義的，據我所知不能改變。如果選擇了上述任一選項，則複選框列表中的最後一個複選框將被禁用。就像明智的，如果最後一個複選框被選中，它將禁用所有上面的複選框。我甚至沒有開始編寫和測試這個部分，因爲這對於非程序員來說很快變得太複雜了。我自己更像是一個PHP編碼器而不是js，更不用說jquery，編碼器了。任何幫助將不勝感激。

來源

2010-06-13 Moj

好的，所以id屬性不能以數字開頭。此外，<label>標記是一個很好的事情來添加使複選框旁邊的文字可點擊。

下面我將如何改變你的HTML：

<label><input type="checkbox" class="chkGroup" id="chk1">First</label> 
<label><input type="checkbox" class="chkGroup" id="chk2">Second</label> 
<label><input type="checkbox" class="chkGroup" id="chk3">Third</label>

而這裏的JavaScript代碼：

$('.chkGroup').bind('click', function(){ 
    if ($('#chk1:checked,#chk2:checked').length > 0) { 
     $('#chk3').attr('disabled', 'disabled').removeAttr('checked'); 
     $('#chk3').parent('label').css({color: '#ccc'}); 
    } else { 
     $('#chk3').removeAttr('disabled'); 
     $('#chk3').parent('label').css({color: '#000'}); 
    } 
});

要檢查看看是否有被選中，你可以只使用:checked selector。如果相鄰複選框被禁用，我還添加了一個css()調用使標籤變灰。

來源

2010-06-13 00:57:27 artlung

非常感謝您的快速回復。這是一些簡潔的代碼和我所追求的東西的類型。我知道jQuery可以真正簡化這一點，我讓它變得更加困難。對於id不以數字開頭的問題太過真實。感謝您的提醒。我沒有選擇真正添加標籤或編輯HTML，因爲它是通過CMS生成的。我現在試圖保持簡單，只需要在較大的圖片之外找到js。我忘了提及該課程是在頁面上的其他控件之間共享的。我不感興趣的控件。好的代碼！我採取了您提供的內容並進行了一些修改，並且工作得很好。

這是我有：

$(":checkbox").click(function(){ 
    if ($('#chk1:checked,#chk2:checked').length > 0) { 
     $('#chk3').attr('disabled', 'disabled').removeAttr('checked'); 
    } else { 
     $('#chk3').removeAttr('disabled'); 
    } 
});

作品就像禁用＃chk3當一方或雙方＃CHK1和CHK2＃檢查魅力。現在我只需要在啓用並檢查＃chk3時禁用＃chk1和＃chk2。你介意添加這個功能嗎？

來源

2010-06-13 02:17:42 Moj

繼續並更新您的問題，不要在答案中提供說明。 – artlung 2010-06-13 02:43:08

基於前兩個使用jquery的狀態控制第三個複選框

回答

相關問題