如果设置了检查属性，则将引导按钮设置为按下状态答案

【问题标题】：Setting bootstrap button to pressed state if checked property is set如果设置了检查属性，则将引导按钮设置为按下状态
【发布时间】：2016-07-07 22:07:28
【问题描述】：

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

要重现，请运行下面的代码 sn-p 并单击 Set button to pressed state。该按钮仍处于未按下状态，但警报显示 checked 属性已设置。

如何解决它，如果在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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

【讨论】：