使用jQuery禁用提交按钮，直到字段和至少一个chceckbox具有值

Question

想象一下一个时事通讯订阅表单。我的表单只有两种不同的字段类型(text、checkbox(，其中一些需要在提交前完成。当然，必填的电子邮件字段和复选框中的至少一个。提交/订阅按钮应保持禁用状态，直到满足上述条件。当具有值的字段变为空时，它还应该从启用状态恢复为禁用状态。我知道这种问题在这里已经回答过好几次了。我浏览了以前关于该功能的问题中的一些示例，这些问题仅适用于无线电和复选框或<input>字段：

• 禁用提交按钮，直到所有字段都有值
• 禁用提交按钮，直到所有表单输入都有数据为止

其中一些问题得到了解答，但使用的代码已经过时。此外，我无法为我的特定案例编写一个工作代码。非常接近的是使用jQuery禁用提交按钮，直到所有字段都有值(input、radio、select、checkbox(。我用他们所有的人走到了这里：我可以计算填充字段的数量，并在其中至少两个字段完成时启用按钮。然而，两个复选框(没有电子邮件(就足够了——这是错误的。你能帮帮我吗？

$(function() {
$('.subscribe-form').on('input',':input',function() {
var inputs = $('.subscribe-form :input');
var num_inputs = inputs.length;
var num_filled = inputs.filter(function() { return $(this).is(':checkbox')?$(this).is(':checked'):!!this.value }).length;
$('.subscribe-form :submit').prop('disabled',(num_filled+1<num_inputs));
});
});

.subscribe-form {
width: 400px;
margin: 50px;
}
.subscribe-form__row {
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid grey;
}
p {
font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="subscribe-form">
<div class="subscribe-form__row">
<p>E-mail</p>
<input type="text" placeholder="your e-mail" />
</div>
<div class="subscribe-form__row">
<p>Interests</p>
<label for="checkbox-1">Nature</label>
<input id="checkbox-1" type="checkbox" />
<label for="checkbox-2">Travel</label>
<input id="checkbox-2" type="checkbox" />
</div>
<input type="submit" value="Subscribe" disabled />
</fieldset>

Answer 1

我会分别计算电子邮件字段和复选框。

下面，我添加了required类，以便于选择所需的元素。也许有一天你会需要一些没有回报的田地。

然后，对于电子邮件字段，我添加了一个email类，因为将来可能需要添加一些名字和姓氏字段。我建议你用正则表达式来测试它，而不仅仅是空的。。。请参阅另一个SO答案，从中开始。

然后，在变量中包含my_condition使代码更易于读取并维护and以调试…；(

$(function() {
$('.subscribe-form').on('input',':input',function() {
console.clear() // Just for this demo...

var email = $('.subscribe-form .required.email').filter((i,el)=>el.value!=="");
var checkboxes = $('.subscribe-form .required:checkbox:checked');
console.log("email",email.length,"checkbox",checkboxes.length)

var my_condition = email.length>0 && checkboxes.length>0
console.log(my_condition)
$('.subscribe-form :submit').prop('disabled',!my_condition);
});
});

.subscribe-form {
width: 400px;
margin: 50px;
}
.subscribe-form__row {
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid grey;
}
p {
font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="subscribe-form">
<div class="subscribe-form__row">
<p>E-mail</p>
<input type="text" placeholder="your e-mail" class="required email"/>
</div>
<div class="subscribe-form__row">
<p>Interests</p>
<label for="checkbox-1">Nature</label>
<input id="checkbox-1" type="checkbox" class="required" />
<label for="checkbox-2">Travel</label>
<input id="checkbox-2" type="checkbox" class="required" />
</div>
<input type="submit" value="Subscribe" disabled />
</fieldset>