如果在Bootstrap中选中了复选框,则选中一组复选框。

时间:2014-05-27 08:07:15

标签: javascript jquery html twitter-bootstrap twitter-bootstrap-3

您好,我在bootstrap 3中执行此操作时遇到问题。我在jsfiddle中使用此代码,但它不能正常工作。

这里是 jsfiddle

HTML

<div class="col-md-3 span6 privilege-container-b">
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv1" class="test_priv1">Checkbox 1</label>
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv2" class="test_priv2">Checkbox 2</label>
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv3" class="test_priv3">Checkbox 3</label>
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv4" class="test_priv4">Checkbox 4</label>
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv5" class="test_priv5">Checkbox 5</label>
<label class="checkbox">
    <input type="checkbox" name="mypriv" value="test_priv6" class="test_priv6">Checkbox 6</label>
</div>

Jquery的

$('.test_priv1').change(function () {
    var val = $('.test_priv1').is(':checked');
    if (val === true) {
        $('.test_priv2, test_priv3').prop('checked', true);
        $('.test_priv2, test_priv3').prop('disabled', true);
    } else {
        $('.test_priv2, test_priv3').prop('checked', false);
        $('.test_priv2, test_priv3').prop('disabled', false);
    }
    return false;
});

上面的代码不起作用。我的目标是检查test_priv1,检查并锁定test_priv2和test_priv3。我的代码有什么问题吗?请纠正我们。谢谢

1 个答案:

答案 0 :(得分:1)

我会将这个点添加到text_priv3选择器并执行

Live Demo

$(function() {
    $('.test_priv1').on("click", function () { // IE<9 triggers change after blurred
        var checked = $(this).is(':checked');
        var $otherChecks = $('.test_priv2, .test_priv3');
        $otherChecks.prop('checked', checked);
        $otherChecks.prop('disabled', checked);
        $otherChecks.parent().toggleClass("disabled",checked);
    });
});

注意我也对标签文字

进行了灰色处理

顺便说一下,如果您希望将所有其他方框变灰,无论您是哪个类,都可以

var $otherChecks = $("input[name='mypriv']:not('.test_priv1')");

var $otherChecks = $("input[name='mypriv']").not(this);