Отключение флажков после выбора указанной суммы

Question

Я работал над страницей, которая позволит войти в определенную часть моего веб-сайта, если пользователь выберет 8 из 25 флажков в правильной последовательности.

Вот то, над чем я работаю до сих пор НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ УВИДЕТЬ ЖИВУЮ ВЕРСИЮ

Мой вопрос: как я могу полностью отключить остальные флажки после выбора 8, пока я использую javascript, чтобы вести подсчет, и у меня есть всплывающее окно с предупреждением, чтобы они больше не выбирались, но я бы хотел чтобы полностью отключить остальные флажки, если это возможно.

Answer 1

Я упростил ваш код, и он здесь .

и это ответит на ваш вопрос,

    //update checkCount 
    checkCount = $(':checked').length;

    if (checkCount >= maxChecks) {
        //alert('you may only choose up to ' + maxChecks + ' options');
        $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
    } else {
        $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
    }

Answer 2

Если у вас есть предупреждение прямо сейчас, используйте этот бит jQuery:

$('input[name=checkbox]:not(:checked)').attr('disabled','disabled');

См. Форк вашего кода с этой работой: http://jsfiddle.net/fKwEQ/

Answer 3

Вы можете сделать это, изменив метод setChecks следующим образом:

function setChecks(obj) {
    if(obj.checked) {

        checkCount = checkCount + 1;

        //note: modify this selector to specify the actual table in question,
        //of course. If this is not known beforehand (ie there are multiple
        //tables of checkboxes), you can use
        //  $(this).closest('table').find('input:checkbox:not(:checked)')
        //instead.
        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').attr('disabled', 'disabled');

    } else {

        if(checkCount == 8)
            $('table input:checkbox:not(:checked)').removeAttr('disabled');

        checkCount = checkCount - 1;
    }
}

Не имеет отношения к рассматриваемому вопросу, но, надеюсь, полезно: я знаю, что это пример jsfiddle и, следовательно, вероятно, не указывает наваш реальный код, но вы должны рассмотреть возможность использования согласованного форматирования, особенно в отношении отступа (и в меньшей степени интервала).Кроме того, это хорошая привычка всегда использовать точки с запятой при написании JavaScript, даже если они иногда являются необязательными.Читаемый код намного легче отлаживать, расширять и, безусловно, легче понять для других.

Еще одна вещь, которую вы можете сделать, чтобы упростить ваш код, это использовать таблицы стилей вместо указания ширины и выравнивания в каждом элементе td,использование ненавязчивого JavaScript вместо события onclick в каждом флажке.Все они могут быть заменены простым оператором связывания jQuery в вашем document.ready событии:

$('table input:checkbox').click(setChecks);

Для этого потребуется изменить setChecks, чтобы вместо этого получить параметр события.(Изменить) Вот так:

function setChecks() {
    if(this.checked) {
        ...
    } else { ... }
}

На самом деле вам не нужен параметр события, потому что this относится к текущему целевому событию, поэтому вы можете просто удалить этот параметр.