javascript - 允许或限制的最大和最小复选框

Question

我想限制单击的复选框数量。当它达到限制时我想触发一个 Action 。假设最大限制为 3，最小限制为 1。这是我的 html。

<div class="ingredients">
    <span class="border-bottom"></span>
    <div class="row cf">
        <label tabindex="1" class="mnf-checkbox" for="tuzCheck">
            <span class="ck"></span>
            <input id="tuzCheck" type="checkbox"
                   name="information" value="1" />
            <span class="name">Tuz</span>
        </label>
        <label tabindex="2" class="mnf-checkbox" for="karnibaharCheck">
            <span class="ck"></span>
            <input id="karnibaharCheck" type="checkbox"
                   name="information" value="2" />
            <span class="name">Karnıbahar</span>
        </label>
        <label tabindex="3" class="mnf-checkbox" for="biberCheck">
            <span class="ck"></span>
            <input id="biberCheck" type="checkbox"
                   name="information" value="3" />
            <span class="name">Biber</span>
        </label>
        <label tabindex="4" class="mnf-checkbox" for="sosisCheck">
            <span class="ck"></span>
            <input id="sosisCheck" type="checkbox"
                   name="information" value="4" />
            <span class="name">Sosis</span>
        </label>
        <label tabindex="5" class="mnf-checkbox" for="prasaCheck">
            <span class="ck"></span>
            <input id="prasaCheck" type="checkbox"
                   name="information" value="5" />
            <span class="name">Prasa</span>
        </label>
    </div>
</div>

我尝试使用此代码，但这对我没有帮助。

var maxCheckedCount = 3;

jQuery('input[type=checkbox]').click(function () {
    var n = jQuery('input:checked').length;
    if (n >= maxCheckedCount) {
        $(this).prop('checked', false);
        $(".counter").text("hakkın kalmadı :(").css("color", "#cd1212");
    }
});

我想做的是:当达到极限时我想触发一个 Action ，用户无法继续检查。我是初学者，所以请不要评判我:)

Answer 1

试试这个...

http://jsfiddle.net/ZpqQ2/3/

var max = 3;
jQuery('input[type=checkbox]').click(function () {
    var n = jQuery('input:checked').length;
    if (n > max) {
        // here your code
        $(this).prop('checked', false);
        alert('Minimum of 3');
    }
 });