禁用表单提交，直到（两个）复选框被选中

Question

我们有一个表单，在提交表单之前，我们有两个复选框。

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>

用于验证这些的 js（虽然不起作用）

if(terms == "") $('#terms').css({"outline-color":"#F12B63"});
if(privacy == "") $('#privacy').css({"outline-color":"#F12B63"});

Answer 1

Jesse 有一个很好的解决方案。对于避免重复的稍微更简洁的解决方案（您知道，如果有人发疯并决定添加更多复选框），您可以这样做：

$(function() {
    $('input.required').click(function() {
        var unchecked = $('input.required:not(:checked)').length;
        if (unchecked == 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
    });
});

Answer 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');
     }
    });
  });