Disable submit пока не заполнены минимум 5 checkbox
Здравствуйте.
Есть такой код: $(document).ready(function(){ $.each($(".checkbox"),function(){ if($("input", this).is(':checked')){ $(this).addClass("checked"); } } ); $(".checkbox").click(function(){ $(this).toggleClass("checked"); var path = $("input", this); if(path.is(':checked')){ path.attr("checked", false); }else{ path.attr("checked", true); } } ); } ); <script> var n; function check_all() { n = $("input:checked").length; } function show_result() { if(n>=4){ $('input:submit').attr("disabled", false); } else { $("#result_calc").html("<div class=\"result_calc\">Нужно отметить больше 5 пунктов</div>"); } } </script> <span class="checkbox"> <input type="checkbox" /> <span class="check" onclick="check_all();"></span> </span> <input disabled id="button" type="submit"/> Я хочу следующее - в форме много checkbox'ов - что-то вроде калькулятора. Нужно, чтобы, пока не были отмечены минимум 5 checkbox кнопка отправить была не активна. Мне нужно именно такое решение, т.е. до отправки проверять количество отмеченных чекбоксов. Вот только данный код у меня не работает. Вообще ничего не происходит. Кнопка не включается. Может нужно на кнопку поставить onclick и тогда проверять поля? |
$('input:submit').prop("disabled", $("input:checked").length > 4 ? 0 : 1); PS. Проверку выбранных флажков и установку атрибута нужно производить при каждой смене флажков. |
Спасибо за ответ. Я не понял, куда это вставить? Вместо
$('input:submit').attr("disabled", false); |
checkbox выбрать все минимум 5
november,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> label { display: block; } .show{ display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var a = $("form"), c = $(".checkbox input:checkbox"), d = $("input:checkbox", a).not(c), e = $(".show", a); a.on("click", function(b) { $(b.target).is(c) && d.prop({ checked: b.target.checked }); b = $("input:checked").not(c).length; var a = 5 > b; $("input:submit").prop("disabled", +a); a ? e.slideDown() : e.slideUp(); c.prop({ checked: d.length == b }) }) }); </script> </head> <body> <form action="http://"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <span class="checkbox"> <label><input type="checkbox" />выбрать/сбросить всё</label> </span> <div class="show">минимум 5 пунктов</div> <input disabled id="button" type="submit"/> </form> </body> </html> |
Спасибо огромное! Работает!
|
Часовой пояс GMT +3, время: 01:13. |