Question

我想限制点击的复选框数量。当它达到极限时我想触发一个动作。假设最大限制为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");
    }
});

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

Answer 1

尝试Fiddle

jQuery('input[type=checkbox]').click(function() {
    var n = jQuery('input[type=checkbox]:checked').length;
    if (n >= 1 && n <= 3) {
        // here your code
    }
});

Answer 2

试试这个...

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');
    }
 });

Answer 3

var countChecked = function () {
var n = $("input:checked").length;
alert("n>>>" + n);
               
$("div").text(n + (n === 1 ? " is" : " are") + " checked!");
if(n == 2){
 $("input:checkbox:not(:checked)").attr("disabled", true);
} else {
 $("input:checkbox:not(:checked)").attr("disabled", false);
}
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
 <input type="checkbox" name="newsletter" class="newsletter" value="Hourly">
 <input type="checkbox" name="newsletter" class="newsletter" value="Daily">
 <input type="checkbox" name="newsletter" class="newsletter" value="Weekly">
 <input type="checkbox" name="newsletter" class="newsletter" value="Monthly" >
 <input type="checkbox" name="newsletter" class="newsletter" value="Yearly">
</p>

Answer 4

问题是我在警报后仍然继续检查。这并不限制我检查。

最大允许或最小允许或限制复选框

4 个答案: