Question

所以我有一个清单，如果未选中所有复选框，则单击下一步时，需要高亮显示该复选框按钮/将其边框显示为红色。我创建了一个名称为changeboxcolor的css类，但是当我将其添加到该框中时，检查中的颜色不会改变，这表明该类已添加，但边框不会显示

这是我的CSS

.changeboxcolor{
    border-color: crimson;
}

这是jQuery

onStepChanging: function (event, currentIndex, newIndex) { 
    if(newIndex === 1  && $(".check_list_1:checked").length !==  $(".check_list_1").length){ 
        $(".check_list_1").addClass("changeboxcolor");
        $(".check_list_1:checked").removeClass("changeboxcolor");    
        return false;
    }
}

<td> 
    <span class="button-checkbox">
        <button type="button" class="btn" data-color="primary" style="border-color: crimson; width: 150px; height: 100px; white-space: normal;" style="width: 150px; height: 100px; white-space: normal;">Silicon and rear area clean</button>
        <input type="checkbox" class="hidden check_list_1"/>
    </span>
</td>

因此，如果我只是在该按钮中添加该类，例如es class =“ hidden check_list_1 changecolorbox”，则它不起作用，但是如果我在style = border-color：深红色中添加边框，则它会起作用

Answer 1

仅border-color不足以显示边框。仍未设置border-width和border-style。

.changeboxcolor{
    border-color: crimson;
    border-width: 5px;
    border-style: solid;
}

或更简单的做法是将所有三个设置为一行。

.changeboxcolor{
    border: 5px solid crimson;
}

Answer 2

您试图将一个类添加到一个类中，而不是选择要在其中添加该类的元素。

$("input:checkbox:not(:checked)").addClass("changeboxcolor")

jQuery选择器可能需要更具选择性，因为它会搜索DOM中的任何复选框并应用类changeboxcolor。

Answer 3

问题是当我需要将类添加到按钮时，它正在将类添加到<checkbox>中，因此使用以下命令解决了我的问题：

$('input.check_list_1:checkbox:not(:checked)')
  .closest('span.button-checkbox')
  .find('button')
  .addClass('changeboxcolor');

Answer 4

只需更改此代码

.changeboxcolor{
    border-color: crimson;
}

到

.changeboxcolor{
    border: 2px solid #FF0033;
}

使用.addClass函数时，单击时不会显示边框

4 个答案: