首页 > 解决方案 > 使用 JQuery Validate 更改复选框轮廓颜色

问题描述

我有一组具有相同名称的复选框。当使用 JQuery validate 验证至少一个被选中时,只有第一个复选框设置为红色轮廓并且背景设置为红色。这似乎是由 validate 插件完成的,因为没有额外的代码仍然会改变。

我尝试了以下代码,并且检查元素显示了对其他复选框样式的更改,但它们没有更改。

 <label class="checkbox ">
   <input class="taskcheck" type="checkbox" name="task" value="x">
 </label>

 style="outline-color: rgb(185, 44, 40);"

 errorPlacement : function(error, element) {
      if (element.attr('name') == 'task'){
           $('.taskcheck').css('outline-color','#B92C28');  
      } else {
           error.insertAfter(element.parent());
      }

标签: jquerycss

解决方案


我能够获得所需的效果,即当用户尝试提交表单时,将组中的所有复选框更改为红色。我通过在 jquery validate errorPlacement 函数中使用以下内容来完成此操作。

        errorPlacement : function(error, element) {
            if (element.attr('name') == 'task'){
                $('ul.task-list').find('label.checkbox').addClass('state-error');
            } else {
                error.insertAfter(element.parent());
            }
        }

推荐阅读