如果设置“选中”属性，则将引导按钮设置为按下状态。

Question

单击div中的文本不会将引导程序的状态设置为按下。

若要复制，请运行下面的代码片段并在Set button to pressed state中单击。按钮仍处于未按压状态，但警报显示已设置选中的属性。

如何修复它，如果在div内的文本中单击按钮，按钮就会出现在选中的状态中？

Bootstrap文档包含：

如果复选框按钮的选中状态是更新的，而不触发按钮上的单击事件(例如，通过或通过设置输入的选中属性)，则需要自己在输入的标签上切换.active类。

这是否应该付诸实施，如果是，如何实施？

​

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $('.designer-field').on("click", function () {
                $('#designer-javascript-bold').prop('checked', true);
                // alert($('#designer-javascript-bold').prop('checked'));
            });
        });

    </script>

</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
        </label>
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
        </label>

    </div>
    <div class="designer-field">Set button to pressed state</div>
</body>

​

Answer 1

您还需要触发父标签上的类更改。您正在使用的插件似乎不会在手动触发器上自动执行此操作。

​

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $('.designer-field').on("click", function () {
                $('#designer-javascript-bold').prop('checked', true);
                $('#designer-javascript-bold').parent().toggleClass('active');
            });
        });

    </script>

</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
        </label>
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-bold"></span>
        </label>

    </div>
    <div class="designer-field">Set button to pressed state</div>
</body>

​