Открыть меню    

Проверяем, отметил (checked) ли пользователь хотя бы один флажок (checkbox)

В этом снипете мы проверим отметил (checked) ли пользователь хотя бы один флажок (checkbox) в форме.

В этом примере кнопка submit становится disabled, если не выбран (checked) хотя бы один флажок; соответственно, если посетитель отметил хотя бы один флажок, кнопка становится enabled.

Хитрость заключается в том, что вы можете использовать .is(":checked") для объекта jQuery (а это набор элементов) и возвращать true, если любой из этих элементов отмечен (checked), в противном случае будет возвращаться false. Далее, используя метод attr, вы можете включать или отключать атрибут disabled.

HTML

<form>
   <!-- bunch of checkboxes like: -->
   <input type="checkbox" ... >
   <input type="checkbox" ... >

   <!-- submit button, defaults to disabled -->
   <input type="submit" value="submit">
</form>

jQuery

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});


// или

$('#formcheckboxExample input[type="checkbox"]').change(function () {

    if ($(this).is(":checked"))
    {
        $("#formcheckboxExample input[type='submit']").attr("disabled", false);
    }
    else
    {
        $("#formcheckboxExample input[type='submit']").attr("disabled", true);
    }
});

Пример: кнопка будет включена, если помечен хотя бы один флажок

Комментарии к статье

аватарка пользователя
2016-10-16
Артем

Спасибо помогло! А как сделать, чтобы Option1 исключить из рассмотрения? Чтобы его состояние не влияло на disabled кнопки.

аватарка пользователя
2017-05-17
Владимир

Спасибо за статью!
А подскажите как сделать так, чтобы кнопка стала активной только когда отмечены все (в моём случае два) чексбоксы?

аватарка пользователя
2017-05-17
Владимир

Спасибо за статью!
А подскажите как сделать так, чтобы кнопка стала активной только когда отмечены все (в моём случае два) чексбоксы?

Добавить комментарий к сниппету