javascript - Bootstrap 切换按钮保持灰色

Question

正常:

首次点击:

第二次点击:

第二次单击时，它保持灰色，并且仅在其他地方发生操作时清除，例如鼠标点击，选择。取消选择后如何使其恢复到原始状态？

Answer 1

试试这个:

HTML:

<div class="btn-group-vertical">
    <button id="btn1" type="button" class="btn btn-default">Yes</button>
    <button id="btn2" type="button" class="btn btn-default">Maybe</button>
     <button id="btn3" type="button" class="btn btn-default">No</button>
</div>

脚本:

 var flag1 = 1, flag2 = 1, flag3 = 1;
        $("#btn1").click(function () {
            if (flag1 == 2) {
                $("#btn1").css("background-color", "white");
                flag1 = 1;
            } else {
                $("#btn1").css("background-color", "lightgray");
                flag1 = 2;
            }
        });
        $("#btn2").click(function () {
            if (flag2 == 2) {
                $("#btn2").css("background-color", "white");
                flag2 = 1;
            } else {
                $("#btn2").css("background-color", "lightgray");
                flag2 = 2;
            }
        });
        $("#btn3").click(function () {
            if (flag3 == 2) {
                $("#btn3").css("background-color", "white");
                flag3 = 1;
            } else {
                $("#btn3").css("background-color", "lightgray");
                flag3 = 2;
            }
        });

DEMO