如何将按钮类从 btn-default 更改为 btn-success

Question

我有这个带有选项作为按钮的多选框。

<select multiple class="form-control" onchange="selectedIds(this)" >
                            <option value="" onclick="selectUnselect(this)" class="btn btn-default">
                                option1
                            </option>
                        </select>

通过 jQuery，我正在更改单击时的按钮类

$(document).ready(function () {
$(".form-control option").click(function () {
    if ($(this).hasClass('btn')) {
        $(this).toggleClass('btn-success');
    } else {
        $(this).toggleClass('btn-default');
    }
});

});

我想将所选选项的按钮颜色更改为绿色，例如 btn btn-success 类从 btn btn-default 并且当用户再次单击所选选项时，它应该返回初始颜色，即 btn btn-default

单击单个选项可以正常工作，但是当我选择多个选项时，上一个按钮的顶部颜色变为蓝色， 像这样

,

直播应用在这里：https://i2a.herokuapp.com/app/questionnaire/create/

在 Safari 中，该选项不是作为按钮出现，但在 Chrome 中它是作为按钮出现

谁能帮我解决这个问题？谢谢。

Answer 1

在您的代码中，第一个条件将始终为真，因为.btn 将始终在元素上。试试这个：

$(document).ready(function () {
   $(".form-control option").click(function () {
       $(this).toggleClass('btn-success');
       $(this).toggleClass('btn-default');
   }
);

在第一次点击时，它将删除.btn-default 类并添加.btn-success 类。第二次点击它会做相反的事情。