页面上有一个复选框,我已经为其创建了自定义错误控制CSS属性(类似于has-error和has-success):
.has-checkbox-error {
outline-width: 1px;
outline-style: solid;
outline-color: #a94442 !important;
}
.has-checkbox-success {
outline-width: 1px;
outline-style: solid;
outline-color: #3c763d !important;
}
这是页面上实际元素的HTML:
<div class="checkbox" id="div_terms">
<div id="input_terms">
<input type="checkbox" class="form-control" id="terms" name="terms" />
<p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject
to change at any time. You agree to abide by all league rules.</p>
</div>
</div>
更改复选框的值时,它将运行以下jQuery:
jQuery("#terms").on("change", function() {
if(jQuery("#terms").prop("checked")) {
jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
jQuery("#terms").addClass("has-checkbox-success has-feedback");
jQuery("#input_terms").prop("title", "");
} else {
jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
jQuery("#terms").addClass("has-checkbox-error has-feedback");
jQuery("#input_terms").prop("title", "Required. You MUST agree to terms in order to join the league.");
}
})
但是,当它在页面上执行时,着色不会改变,直到您单击页面上的其他位置?参见https://www.twfbl.com/joomla30/registration-form,了解我的意思。
我尝试动态更改代码的焦点(使用jQuery [“#terms_p”}。focus()),但它的效果与单击页面不同。
任何见识将不胜感激。
答案 0 :(得分:0)
jQuery("#terms").on("change", function() {
if(jQuery("#terms").prop("checked")) {
jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
jQuery("#terms").addClass("has-checkbox-success has-feedback");
jQuery("#input_terms").prop("title", "");
} else {
jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
jQuery("#terms").addClass("has-checkbox-error has-feedback");
jQuery("#input_terms").prop("title", "Required. You MUST agree to terms in order to join the league.");
}
})
.has-checkbox-error {
outline-width: 1px;
outline-style: solid;
outline-color: #a94442 !important;
}
.has-checkbox-success {
outline-width: 1px;
outline-style: solid;
outline-color: #3c763d !important;
}
.has-checkbox-success:focus {
outline-width: 1px;
outline-style: solid;
outline-color: #ffcc00 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox" id="div_terms">
<div id="input_terms">
<input type="checkbox" class="form-control" id="terms" name="terms" />
<p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject
to change at any time. You agree to abide by all league rules.</p>
</div>
</div>
如果您从上面的代码中删除了 .has-checkbox-success:focus ,那么您应该不会像看到的那样集中显示该复选框,效果很好。 / p>
您发布的页面中复选框的边框为白色,或者可能设置为无,请检查CSS规则。
编辑:
这是给您带来麻烦的CSS。