使用JQuery更改Bootstrap 3中的单选按钮颜色

Question

所以我有一些单选按钮：

<div class="form-group text-danger">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Is a Remix</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Contains Sample</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>

我试图添加一个类，但是它没有改变颜色，我使用的是主题，并且不想修改主题css。 可以使用JQuery吗？

这是我的CSS：

.radio-custom.radio-primary input[type=radio]:checked + label:after,
.radio-custom.radio-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=radio]:checked + label:after {
  background-color: #4ea5e0;
  color: #4ea5e0;
}
.checkbox-custom.fill.checkbox-primary label:before {
  background-color: #4ea5e0;
}

Answer 1

您可以轻松使用jQuery。 我假设该复选框将是某种允许样式的伪复选框，因此您可能需要对选择器和样式非常具体（查看现有的CSS并在浏览器检查器中将对此有所帮助），但是要更改样式，可以在页面上使用jQuery：

$(function () {
    $(".radio-custom").css("background-color", "yellow");
});

如果要覆盖在css中设置为!important的css ，则可以使用此方法，该方法接受第三个优先级参数：

$(function () {
    $('.radio-custom').each(function () {
        this.style.setProperty('background-color', 'yellow', 'important');
    });
});