Как ограничить пользователя проверкой только определенного флажка в списке (на основе его предыдущей проверки)

Question

У меня есть список флажков, которые имеют добавочный список значений.

Мне нужно применить эти правила:

1. пользователь может установить от 1 до 3 флажков, максимум до 1006 *
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? спасибо за вашу помощь!

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 и label. Так как они работают немного по-другому при использовании набора элементов, мы должны разбить его на каждый оператор.

$("#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

Как это: 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 3

Вот обходной путь:

$("#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;}
});

Это сработает при отправке формы, но подтвердит все необходимые условия.

Надеюсь, это поможет.Приветствия

Answer 4

Подключитесь к событию onchange ограничивающего флажка, установив атрибут disabled флажков, которые теперь недоступны, если пользователь только установил флажок, в противном случае сбросьте атрибут. Наглядный пример:

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

Также см. это демо jsFiddle . Очевидно, что это необходимо адаптировать к вашей конкретной ситуации, особенно когда речь идет о проверке того, какие поля включить / отключить в каждой ситуации, но у меня возникает ощущение, что это не ваша проблема.