禁用表单提交，直到（二）复选框被选中 [英] disable form submit until (two) checkboxes are checked

问题描述

我们有一个形式和形式可sumbitted之前，我们有两个复选框。

1. 隐私


2. 条款和条件。

我想要做的，是（有麻烦复选框验证）是禁用，直到两个复选框被选中提交按钮。什么

对于这些HTML是：

 ＆LT;标签类=s_radio＆GT;＆LT;输入类型=复选框级=必需的ID =条款/＆GT; ＆LT;一类=s_main_color的href =/术语＆GT;条款和LT; / A＆GT;＆LT; /标签＆gt;
＆LT;标签类=s_radio＆GT;＆LT;输入类型=复选框级=必需的ID =隐私/＆GT; ＆LT;一类=s_main_color的href =/隐私＆gt;隐私权政策＆lt; / A＆GT;＆LT; /标签＆gt;
 

有关验证这些（尽管不是在工作）的JS

 如果（术语==）$（'＃条款），CSS（{轮廓色：＃F12B63}）;
如果（隐私==）$（'＃隐私'）的CSS（{轮廓色：＃F12B63}）;
 

解决方案

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

  $（函数（）{
    $（'input.required'）​​。点击（函数（）{
        VAR选中= $（'input.required：没有（：选中））。长度;
        如果（未选中== 0）{
            $（'＃submitBtn'）removeAttr（禁用）。
        }
        其他{
            $（'＃submitBtn'）ATTR（禁用，禁用）。
        }
    }）;
}）;
 

We have a form and before form can be sumbitted we have two checkboxes.

1. privacy
2. terms and conditions.

What I want to do, is ( having trouble validating with checkboxes ) is to disable submit button until both checkboxes have been checked.

the html for these is:

<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>

The js for validation for these ( not working though is )

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

解决方案

Jesse has a good solution. For a slightly more concise solution that avoids duplication (you know, in case someone goes crazy and decides to add more checkboxes), you could do this:

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

这篇关于禁用表单提交，直到（二）复选框被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！