當其他複選框被點擊時，複選框被禁用 - 所有使用不同的ID

Question

我試圖自定義一個預先格式化的註冊表單，以便客戶加入我們的郵件列表。基本上我有三個不同的「興趣小組」 - 一個興趣小組每週幾次接收關於狗的信息，另一個興趣小組每週幾次接收有關貓的信息，然後是第三個小組，每次只收到一次「每週更新兩個主題。客戶可以同時訂閱一個和兩個興趣小組，但是如果他們訂閱第三組，則他們不能訂閱其他兩個。

使用由電子郵件服務提供商提供的以下代碼 - 如果客戶單擊第三個複選框，我需要禁用前兩個複選框。

現有的Java腳本（出現的頁面將被使用jQuery）：

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("jquery", "1.4.2"); 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      try { 
      $('#archive-list li:even').addClass("odd"); 
      $('.field-group, .field-group input, .field-group select').live('click',function(event){      
       if (event.type == 'click') { 
        if ($(this).hasClass('field-group')){ 
         var fg = $(this); 
         $(this).find('input, select').slice(0,1).focus(); 
        } else { 
         var fg = $(this).parents('.field-group'); 
         $(this).focus(); 
        } 
        fg.not('.focused-field').addClass('focused-field').children('.field-help').slideDown('fast'); 
        $('.focused-field').not(fg).removeClass('focused-field').children('.field-help').slideUp('fast'); 
       } 
      }); 
      } catch(e){ console.log(e); } 
     });  
    </script> 

然後將HTML：

<ul class="interestgroup_field" id="interestgroup_field_400000"> 
       <li class="interestgroup_row"><input type="checkbox" id="group_128" name="group[1][128]" value="1">&nbsp;<label for="group_128">E-mails about Dogs</label></li> 
       <li class="interestgroup_row"><input type="checkbox" id="group_256" name="group[1][256]" value="1">&nbsp;<label for="group_256">E-mails about Cats</label></li> 
      </ul> 
      <br> 
      <ul class="interestgroup_field" id="interestgroup_field_400000"> 
       <li class="interestgroup_row"><input type="checkbox" id="group_2" name="group[1][2]" value="1">&nbsp;<label for="group_2" >Once A Week - Summary E-mail</label></li> 
      </ul> 

注意的唯一ID - 這是用來與數據庫進行同步。我已經搜索了一個答案，但是我能找到的最佳解決方案是使用所有複選框的相同ID，這對我的應用程序不起作用。

謝謝你的時間 - 任何幫助將不勝感激！

乾杯， 邁克

Answer 1

如前所述，你不能有你的上行線路2有相同的ID。這很糟糕，會導致問題。如果你需要存儲的數據庫記錄標識符，然後使用HTML5數據 - *屬性或使用類：

<ul class="interestgroup_field" data-id="interestgroup_field_400000"> 
    <li class="interestgroup_row"><input type="checkbox" id="group_128" name="group[1][128]" value="1">&nbsp;<label for="group_128">E-mails about Dogs</label></li> 
    <li class="interestgroup_row"><input type="checkbox" id="group_256" name="group[1][256]" value="1">&nbsp;<label for="group_256">E-mails about Cats</label></li> 
</ul> 
<br /> 
<ul class="interestgroup_field" data-id="interestgroup_field_400000"> 
    <li class="interestgroup_row"><input type="checkbox" id="group_2" name="group[1][2]" value="1">&nbsp;<label for="group_2" >Once A Week - Summary E-mail</label></li> 
</ul> 

然後，沿此線的東西應該這樣做：

$(document).ready(function() { 
    $('ul.interestgroup input:checkbox').change(function() { 
     // see if this is the 3rd checkbox that is by itself 
     if ($(this).closest('ul').children().length > 1) return; // nope 
     // grab the other 2 checkboxes so we can fiddle with them 
     var cbs = $(this).closest('ul').prev().prev().find('input:checkbox'); 

     if ($(this).attr('checked')) { 
      // disable the others 
      cbs.attr({ 'checked': false, 'disabled': 'disabled' }); 
     } else { 
      // enable the others 
      cbs.attr({ 'disabled': '' }); 
     } 
    }); 
}); 

這裏的另一種解決方案如果你的複選框並不總是像上面那樣佈局的話，那麼它對HTML結構的依賴性就更小了：

爲了使它工作，在生成你的複選框時，你需要在每個複選框上放置幾位信息。在「組合」複選框上，您需要添加一個特殊的CSS類來將複選框標記爲複合框。此類的複選框將觸發特殊行爲。二，關於合併複選框，要離開它的目的是禁用的複選框的IDS：

<input type="checkbox" id="group_128" name="group[1][128]" value="1">Cats</input> 
<input type="checkbox" id="group_256" name="group[1][256]" value="1">Dogs</input> 
<!-- random html --!> 
<input type="checkbox" id="group_2" name="group[1][2]" value="1" 
    class="combined" data-other-cb="#group_128,#group_256"> 
    Cats and dogs</input> 

看看我們如何把「組合拳」爲CSS類複選框的？使用任何你想要的CSS類，它不需要任何樣式規則。我們只需要將它用作標記類。看看我們如何使用「data-other-cb」屬性來放置其他複選框的ID的逗號分隔列表？另請注意，我們在每個ID前放置了一個「＃」。這使得一個有效的jQuery選擇字符串，所以我們就可以通過這整個價值jQuery來找回所有的複選框的問題

現在我們可以寫出下面的jQuery的委託方法：

$(document).ready(function() { 
    $('body').delegate('.combined', 'change', function() { // hookup to change event of all current and future .combined elements 
     // get the ids of the checkboxes we need to control 
     var ids = $(this).attr('data-other-cb'); 
     if (!ids) return; // no other ids 

     // find the checkboxes and manipulate them 
     var cbs = $(ids); 

     if ($(this).attr('checked')) { 
      // disable the others 
      cbs.attr({ 'checked': false, 'disabled': 'disabled' }); 
     } else { 
      // enable the others 
      cbs.attr({ 'disabled': '' }); 
     } 
    }); // delegate() 
}); // ready()