我们有一个表单,在表单之前我们有两个复选框。
我想要做的是(无法通过复选框验证)是在选中两个复选框之前禁用提交按钮。
这些的html是:
<label class="s_radio"><input type="checkbox" class="required" id="terms"/> <a class="s_main_color" href="/terms">Terms</a></label>
<label class="s_radio"><input type="checkbox" class="required" id="privacy"/> <a class="s_main_color" href="/privacy">Privacy Policy</a></label>
用于验证这些的js(虽然不起作用)
if(terms == "") $('#terms').css({"outline-color":"#F12B63"});
if(privacy == "") $('#privacy').css({"outline-color":"#F12B63"});
答案 0 :(得分:9)
杰西有一个很好的解决方案。对于一个更简洁的解决方案,避免重复(你知道,如果有人发疯并决定添加更多复选框),你可以这样做:
$(function() {
$('input.required').click(function() {
var unchecked = $('input.required:not(:checked)').length;
if (unchecked == 0) {
$('#submitBtn').removeAttr('disabled');
}
else {
$('#submitBtn').attr('disabled', 'disabled');
}
});
});
答案 1 :(得分:2)
试试这个:
HTML
<label class="s_radio"><input type="checkbox" class="required" id="terms"/> <a class="s_main_color" href="/terms">Terms</a></label>
<label class="s_radio"><input type="checkbox" class="required" id="privacy"/> <a class="s_main_color" href="/privacy">Privacy Policy</a></label>
的Javascript
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$("#privacy").click( function(){
if( $(this).is(':checked') && $("#terms").is(':checked') ) {
$('input[type="submit"]').removeAttr('disabled');
} else {
$('input[type="submit"]').attr('disabled','disabled');
}
});
$("#terms").click( function(){
if( $(this).is(':checked') && $("#privacy").is(':checked') ) {
$('input[type="submit"]').removeAttr('disabled');
} else {
$('input[type="submit"]').attr('disabled','disabled');
}
});
});
我不能保证它是完美的,但我很确定它应该有用 - 如果没有,它肯定会让你走上正轨。
希望这有帮助!
编辑:
对于用户的特定按钮:
<button class="s_button_1 s_main_color_bgr" id="buttonsend" name="submit" value="submit" disabled="disabled"><span class="s_text">Create Account</span></button>
$(document).ready(function(){
$("#privacy").click( function(){
if( $(this).is(':checked') && $("#terms").is(':checked') ) {
$('#buttonsend').removeAttr('disabled');
} else {
$('#buttonsend').attr('disabled','disabled');
}
});
$("#terms").click( function(){
if( $(this).is(':checked') && $("#privacy").is(':checked') ) {
$('#buttonsend').removeAttr('disabled');
} else {
$('#buttonsend').attr('disabled','disabled');
}
});
});