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

我们有一个表单，并且在表单可以被绑定之前，我们有两个复选框。禁用表单提交直到（两个）复选框被选中

隐私
条款和条件。

我想要做的是（无法通过复选框进行验证）是禁用提交按钮，直到两个复选框都被选中。

这些的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"});

来源

2012-01-11 422

？如果我正在做这个完全错误的帮助，我会很感激。它是一个非常大的表格 – 422 2012-01-11 23:16:07

尝试了这一点：

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

来源

2012-01-11 23:38:31

谢谢杰西，我们的提交按钮是... – 422 2012-01-12 00:23:06

应该很容易改变它，以便工作。我将编辑好的代码放在底部的答案中，很高兴能帮上忙！ – 2012-01-12 00:56:19

只需将代码添加到我的答案中。在这里也使用JSfiddle：http://jsfiddle.net/jpollak92/LbxsM/。很高兴我能帮到 – 2012-01-12 01:13:28

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

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

来源

2012-01-12 01:39:37

好想法，比我的方式更优雅。 – 2012-01-12 22:19:39

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

回答

相关问题