Bootstrap 3 - 选择最少一个的多个活动按钮

时间:2016-03-26 04:31:35

标签: jquery html twitter-bootstrap-3

我有这些多选按钮。我该怎么办才能让用户无法全部取消选中。必须至少选择一个按钮,如果不是更多:

<div class="container">
    <br><p>Click all the fruits that you like</p>
    <div class="btn-group col-xs-12" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="checkbox" name="fruit" id="apple" value="apple">apple
        </label>
        <label class="btn btn-default">
            <input type="checkbox" name="fruit" id="pear" value="pear">pear
        </label>
        <label class="btn btn-default">
            <input type="checkbox" name="fruit" id="orange" value="orange">orange
        </label>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

示例:https://jsfiddle.net/o1jwc7h7/

添加此jquery:

$('.btn-group input[type="checkbox"]').change(function(){
    if ($('input[type="checkbox"]:checked').length == 0) {
       $(this).prop("checked",true).parent().addClass('active');
       alert("at least one of them should be checked");
    }
});