複選框上的jQuery驗證

Question

我有一個頁面，有3個複選框，我需要做一些自定義的jQuery驗證。以下是3個複選框的副本。

我想要做的是設置它，以便用戶只能選擇前2個複選框中的一個（如果他們選擇第一個，使第二個不可用，反之亦然），然後，如果用戶選擇第一2盒一個，那麼他們可以選擇第三複選框。

是任何人都能夠幫助這個？

<input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1"> 

<input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1"> 

<input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1"> 

Answer 1

這裏是我已經掀起了對JSFiddle http://jsfiddle.net/wfjGm/

的解決方案由於您沒有任何身份證件可以使用我不得不去尋找元素的位置。

$(document).ready(function(){ 

$('input:checkbox:eq(2)').attr("disabled", true); // Step 1 

    $('input:checkbox').click(function(){ // Step 2 

      if (($('input:checkbox:eq(0)').is(':checked')) || ($('input:checkbox:eq(1)').is(':checked'))){ // Step 3 
          $('input:checkbox:eq(2)').attr("disabled", false); // Step 4   
      } 


      else {  
       $('input:checkbox:eq(2)').attr("disabled", true); //Step 5 
       } 

    }); 

}); 

步驟1）使第三複選框上文件就緒（禁用：當量使用0索引，所以第三複選框元件2）
步驟2）上運行的點擊事件的函數，每次一個複選框點擊
步驟3）檢查如果選中了第一個或第二個複選框，並且啓用第三個複選框（如果是）。
步驟4）步驟5 - 如果用戶取消選擇前兩個中的一個，則回退語句以禁用該複選框。


快速編輯 如果你想確保第三複選框選中也被禁用時，如果前兩個都選中，則更改第5步這個的其他行...

$('input:checkbox:eq(2)').attr("disabled", true).attr("checked", false); } 

Answer 2

我已爲您制定了一個解決方案，其中我cache the selectors，並使用.prop爲演示的緣故。

$(function() { 
    var $options = $('.option'); 
    var $priority = $('#upselljnpriority'); 

    function uncheckOtherOptions(domElem) { 
     if (domElem.checked) { 
      $options.not(domElem).prop('checked', false); 
     } 
    } 

    function togglePriorityAvailability() { 
     if ($options.is(':checked')) { 
      $priority.prop('disabled', false); 
     } else { 
      $priority.prop('disabled', true); 
      $priority.prop('checked', false); 
     } 
    } 

    $options.click(function() { 
     uncheckOtherOptions(this); 
     togglePriorityAvailability(); 
    }); 

    togglePriorityAvailability(); 
}); 

注意，我添加了一個option類前兩個選項。這使我能夠做出非常快速和乾淨的選擇器。這也是一個很好的做法，因爲您的html代碼可以在沒有任何JavaScript更改的情況下使用更多選項進行擴展。如果這不是想要的，你可以使用我算$options和$priority事件處理程序之外的開頭和永不再

var $options = $('#upselldigitaldisplay, #upsellenhancedclassificationad'); 

通知！這樣我緩存了我的計算以備後用。這提高了性能。

請注意，我已經使用.prop來操作屬性，因爲我沒有改變屬性的意圖，只是屬性。

注意行$options.not(domElem).prop('checked', false);。我在輸入時使用了帶有DOM元素的.not()。這意味着原始選擇器減去給定的DOM元素。

請注意，我已經使用了命名函數（uncheckOtherOptions和togglePriorityAvailability）。我喜歡他們。他們給出了有關正在發生和應該發生的事情的更多細節。另外，通過使togglePriorityAvailability成爲一個單獨的函數，我可以重用它（注意最後一行，它將最後一個複選框設置爲頁面載入時的正確狀態）。

我還創建了一個jsFiddle demo供您測試。

Answer 3

我個人建議如下，儘管這需要一些改變，你的HTML（以下jQuery的）：

var radios = $('input[type="checkbox"].ap_upsellstandard'); 
radios.change(function() { 
    var self = this, 
     $self = $(self); 
    if ($self.siblings().length) { 
     // one of the first two: 
     $self.siblings('input').prop('disabled', self.checked); 
     $self.closest('fieldset').next('fieldset').toggle(self.checked); 
    } 
}).last().parent().hide(); 

JS Fiddle demo。

更改後的HTML：

<fieldset> 
    <legend>Select <strong>one</strong> of the following:</legend> 
    <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1" /> 
    <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1" /> 
</fieldset> 
<fieldset> 
    <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1" /> 
</fieldset> 

參考文獻：

• change()。
• closest()。
• hide()。
• last()。
• next()。
• parent()。
• prop()。
• siblings()。
• toggle()。