将错误状态应用到复选框父div

我有一个标准的HTML复选框，我想应用一个错误状态 - 我知道你不能将样式直接应用到复选框，所以我想将样式应用到其父div代替。将错误状态应用到复选框父div

考虑：

<div class="form-row"> 
    <input type="checkbox" name="checkbox" class="required"> 
</div> 

<div class="form-row"> 
    <input type="text" name="text" class="text-input required"> 
</div>

此刻，我可以使用类似样式的文本输入错误：

.text-input .error { 
    background-color:red; 
}

但是，这并不对复选框的工作 - 我试图使用jQuery获得复选框父级，并且只对错误中的父级设置复选框样式（即，对于textinput，只是使用上述）：

$("form-row:has(input[type='checkbox'] error)").css("background-color", "red");

这什么都不做 - 我没有得到任何错误，但父母没有任何反应。只有当子复选框有错误类时，我如何才能设置父div的样式？

来源

2015-06-27 bhttoan

据我所知，因为你的div围绕你的<input>，所以背景不可见。尝试添加一个填充到你的div。或者你的投入保证金。随你便。

.form-row { 
padding: 5px; 
}

来源

2015-06-27 20:51:58 Watte

当我在开发工具中查看元素时，我看不到任何添加到父div的样式 - 即使它在浏览器中不可见，那么它仍应该添加到父级？ – bhttoan

嗯，是的，它应该.. – Watte

我想你已经错过了你的error在jQuery代码之前的一段时间。和你错过了form-row之前的一段时间;）。它应该是：

$(".form-row:has(input[type='checkbox'].error)").css("background-color", "red");

没有一个周期（input[type='checkbox'] error），它指出你在复选框型的输入，内带（和inputs是empty elements，没有错误元素找任何东西都可能在里面）。

来源

2015-06-27 20:52:53

嗨Tomek - 我认为你的意思是错误之前的一段时间（。）？我试图补充说，但它没有任何区别 – bhttoan

是的，期间。您是否确认（通过查看开发人员工具）输入元素实际上是否应用了“错误”类？ –

是的 - 它改变为 – bhttoan

将错误状态应用到复选框父div

回答

相关问题