Ограничить флажки, которые могут быть отмечены в JavaScript?

Question

У меня есть форма с несколькими ингредиентами. Я хочу, чтобы пользователь мог выбрать 3 и не более 3. Поэтому, если они отметили 3, форма больше не будет разрешена, но они могут отменить выбор и выбрать другой.

В данный момент, хотя это не останавливает пометку в ячейке и не считает галочку.

Мой JavaScript

<script type="text/javascript">
    var total = 0;
        function check() {
            if( $("input#name").checked = true )
                { 
                    total = total + 1;
                }
            if( $("input#name").checked = false )
                { 
                    total = total - 1;
                }
            if(total > 3)
                {
                    alert("Please Select only three")
                    $("input#name").checked = false ;
                    return false;
                }
        }
</script>

и моя форма

<form name="ingredientlist" method="post" action="checkboxdone.php">
        <label>Pork</label><input type="checkbox" name="ckb" value="pork" onclick="check();"/><br/>
        <label>Carrot</label><input type="checkbox" name="ckb" value="carrot" onclick="check();"/><br/>
        <label>Whiskey</label><input type="checkbox" name="ckb" value="whiksey" onclick="check();"/><br/>
        <label>Bacon</label><input type="checkbox" name="ckb" value="bacon" onclick="check();"/><br/>
        <label>Leek</label><input type="checkbox" name="ckb" value="leek" onclick="check();"/><br/>
        <label>Potato</label><input type="checkbox" name="ckb" value="potato" onclick="check();"/><br/>
        <input id="button" type="submit" value="Submit" name="button"/>
</form>

Answer 1

Если вы хотите использовать jQuery, вы можете подсчитать их все сразу и управлять ими с помощью одной маленькой функции:

$('input[type=checkbox]').click(function() {
    if (this.checked) {
        if ($('input[type=checkbox]:checked').length > 3) {
            this.checked = false;
            return false;
        }
    }
});

Может быть, кто-то другой собирается создать для вас не-JQuery ответ. Вот пример JSFiddle .

Answer 2

Вставьте это в свой код, и он будет работать просто отлично.

$(document).ready(function(){
  var totalChecked = 0;
  $('form[name="ingredientlist"] > input[type="checkbox"]').change(function(){
      if (!this.checked) { //unchecking
          totalChecked--;
      } else if (totalChecked < 3) { //checking, with less than 3 checked
          totalChecked++;
      } else { //checking, with 3 checked
          this.checked = false;
      }
  });
});

http://jsfiddle.net/W9gNg/1/

Answer 3

Вот скрипка, показывающая, как вы можете это сделать: http://jsfiddle.net/nCges/

Answer 4

Сначала дайте идентификаторы галочкам и перехватите обмен, а не по клику

<form name="ingredientlist" method="post" action="checkboxdone.php">
        <label>Pork</label><input type="checkbox" name="ckb" value="pork" id="ckb_pork" onchange="check();"/><br/>
        <label>Carrot</label><input type="checkbox" name="ckb" value="carrot" id="ckb_carrot" onchange="check();"/><br/>
        <label>Whiskey</label><input type="checkbox" name="ckb" value="whiksey" id="ckb_whiksey" onchange="check();"/><br/>
        <label>Bacon</label><input type="checkbox" name="ckb" value="bacon" id="ckb_bacon" onchange="check();"/><br/>
        <label>Leek</label><input type="checkbox" name="ckb" value="leek" id="ckb_leek" onchange="check();"/><br/>
        <label>Potato</label><input type="checkbox" name="ckb" value="potato" id="ckb_potato" onchange="check();"/><br/>
        <input id="button" type="submit" value="Submit" name="button"/>
</form>

следующий сделать

//global scope
var ckb={pork: false, carrot: false, whiksey: false, bacon: false, leek: false, potato: false}

function check() {
  var checked=0;
  for (var ck in ckb) {
    //Cache DOM reference
    if (!ckb[ck]) ckb[ck]=document.getElementById('ckb_'+ck);
    if (ckb[ck].checked) checked++;
  }

  if (checked>=3) {
    for (var ck in ckb) {
      if (!ckb[ck].checked) ckb.disabled=true;
    }
  }
}