如何限制用戶只檢查列表中的某些複選框（基於他以前的檢查）

Question

我有一個複選框列表，它具有增量值列表。

我需要應用這些規則：

1. 用戶可以檢查1個複選框分鐘至3個複選框最大
2. 用戶只能檢查連續的複選框

（例如：

• 用戶檢查＃6,
• ，則只有＃5或＃7可用，
• 用戶檢查＃7
• 然後只有＃5或＃8可用。
• 用戶檢查＃8,
• 然後沒有更多的複選框可用！

我有複選框名單：

<form id="time-slot" action="" method="POST"> 
    <input type="checkbox" name="tranche" value="1" /> 
    <input type="checkbox" name="tranche" value="2" /> 
    <input type="checkbox" name="tranche" value="3" /> 
    <input type="checkbox" name="tranche" value="4" /> 
    <input type="checkbox" name="tranche" value="5" /> 
    <input type="checkbox" name="tranche" value="6" /> 
    <input type="checkbox" name="tranche" value="7" /> 
    <input type="checkbox" name="tranche" value="8" /> 
    <input type="checkbox" name="tranche" value="9" /> 
    <input type="checkbox" name="tranche" value="10" /> 

    <input type="submit" value="Send" /> 
</form> 

我怎麼能處理好與jQuery的那些規則？ thx爲您的幫助！

Answer 1

$("#time-slot input[type='checkbox']").click(function() { 
    // Disable all unchecked 
    $('input[type=checkbox]:not(:checked)').attr('disabled','disabled'); 
    // If 3 are checked we are done 
    if($('input[type=checkbox]:checked').length == 3) 
     return; 

    // If the checkbox either side of this one is checked, we only have 1 option 
    if($(this).prev().is(':checked') && $(this).next().is(':checked')){ 
     $(this).removeAttr('disabled'); 
     return; 
    } 

    // Enable the checkboxes before and after the current selection 
    $('input[type=checkbox]:checked').prev().removeAttr('disabled'); 
    $('input[type=checkbox]:checked').next().removeAttr('disabled'); 

    // If none are checked, enable all 
    if($('input[type=checkbox]:checked').length == 0) 
     $('input[type=checkbox]').removeAttr('disabled'); 
}); 

這應該涵蓋所有可能性。看到它，行動... http://jsfiddle.net/JcCdD/

UPDATE

這裏的區別是，我們必須使用prevAll和nextAll跳過BR和標籤元素。由於這些工作在使用元素集合時略有不同，我們必須將其分解成每個語句。

$("#time-slot input[type='checkbox']").click(function() { 
    // Disable all unchecked 
    $('input[type=checkbox]:not(:checked)').attr('disabled','disabled'); 
    // If 3 are checked we are done 
    if($('input[type=checkbox]:checked').length == 3) 
     return; 

    // If the checkbox either side of this one is checked, we only have 1 option 
    if($(this).prevAll('input').first().is(':checked') && $(this).nextAll('input').first().is(':checked')){ 
     $(this).removeAttr('disabled'); 
     return; 
    } 

    // Enable the checkboxes before and after the current selection 
    $('input[type=checkbox]:checked').each(function(){ 
     $(this).prevAll('input').first().removeAttr('disabled'); 
     $(this).nextAll('input').first().removeAttr('disabled'); 
    }); 

    // If none are checked, enable all 
    if($('input[type=checkbox]:checked').length == 0) 
     $('input[type=checkbox]').removeAttr('disabled'); 
}); 

新的例子在這裏... http://jsfiddle.net/bEjTf/

Answer 2

掛鉤到onchange事件的限制複選框，設置複選框的disabled屬性現在不可用，如果用戶剛剛選中該複選框，則取消設置該屬性。說明性示例：

$(document).ready(function(){ 
    $('#ch1').change(function(){ 
     if($(this).is(':checked')) { 
      $("#ch2").attr('disabled','disabled'); 
     } else { 
      $("#ch2").removeAttr('disabled'); 
     } 
    }); 
}); 

另請參閱this jsFiddle demo。顯然，這需要適應您的具體情況，特別是在檢查在任何情況下啓用/禁用哪些方框時，但我認爲這不是您的問題。

Answer 3

像這樣：http://jsfiddle.net/j9MJF/1/

$("#time-slot input[type='checkbox']").click(function() { 
    var me = $(this); 
    var clickedIndex= me.prevAll().length; 
    var totalChecked = $("#time-slot input[type='checkbox']:checked").length; 

    $("#time-slot input[type='checkbox']").each(function() { 
     var myIndex = $(this).prevAll().length; 
     if(!$(this).is(":checked")) $(this).attr("disabled", "disabled"); 
     if(totalChecked < 3) { 
      if(myIndex == clickedIndex 
       || $("#time-slot input[type='checkbox']").eq(myIndex+1).is(":checked") 
       || $("#time-slot input[type='checkbox']").eq(myIndex-1).is(":checked")) { 
       $(this).removeAttr("disabled"); 
      } 
     } 
    }); 
}); 

Answer 4

這裏有一個解決方法：

$("#time-slot").submit(function(){ 
    var $checks = $(this).find(":checkbox"); 
    if($checks.size() > 3) { alert("Max 3 checked checks allowed"); return false;} 
    if($checks.size() == 0) { alert("Check at least one!"); return false;} 
    var prevCheckedIndex == null; 
    var contiguous = true;; 
    $checks.each(function(i, elem){ 
     if(!$(this).is(":checked")) return; 
     if(prevCheckedIndex != null && prevCheckedIndex != i-1) 
      return (contiguous = false);   
     prevCheckedIndex = i; 
    }); 
    if(!contiguous) { alert("Checked boxes must be coniguous!") return false;} 
}); 

這將觸發表單提交，但驗證你想要的所有條件。

希望這會有所幫助。歡呼聲