Форум

november · #1 (**permalink**) 15.07.2015, 20:56

Здравствуйте.
Есть такой код:

$(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 и тогда проверять поля?

laimas · #2 (**permalink**) 15.07.2015, 21:26

$('input:submit').prop("disabled", $("input:checked").length > 4 ? 0 : 1);

PS. Проверку выбранных флажков и установку атрибута нужно производить при каждой смене флажков.

november · #3 (**permalink**) 16.07.2015, 01:56

Спасибо за ответ. Я не понял, куда это вставить? Вместо

$('input:submit').attr("disabled", false);

рони · #4 (**permalink**) 16.07.2015, 03:40

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>

november · #5 (**permalink**) 16.07.2015, 17:08

Спасибо огромное! Работает!

Форум

Справочник

Discord чат

Курсы javascript