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, время: 22:14. |