使用jQuery，保持表单的提交按钮被禁用，直到所有必需的文本框，收音机，复选框元素都有值（或被选中） [英] Using jQuery, keep a form's submit button disabled until all of the required textbox, radio, checkbox elements have a value (or are checked)
问题描述
您好，StackExchange人，
我遇到了一些我正在使用的代码的绊脚石，并且我已经包含了一个折叠的HTML示例希望您能够帮助我将剩余的jQuery部分拼凑在一起。
这里的目标是保持提交按钮被禁用，直到ANY元素与一类.Required具有某种价值或其他属性，例如checked。因此，解决方案需要覆盖select，radio，checkbox，textbox和textarea元素（这些元素将具有Required类）。
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"> ;</script>
< form action =someaction / actionmethod =postclass =DisableSubmit>
< input type =textname =titlemaxlength =100autofocus =trueplaceholder =Title ...value =style =width：90％ ; />
< p class =explain>必需< / p>
< label for =i_agree>
< span class =label>我同意以下条款和条件：< / span>
< input type =checkboxid =i_agreeclass =Required/>
< / label>
< p class =explain>必需< / p>
< input type =submitclass =buttonvalue =Submit/>
< / form>
我知道如何处理这个，如果所有的字段都是相同的类型， 。感谢您的宝贵意见。
非常感谢
我会使用更多类似HTML5的样式
$（document）.ready（function（）{
var required = $（'[required]'）;
//为所有你点击的键绑定变量，以及为所有文本字段设置键值
required.bind（'change keyup'，function（）{
var flag = 0;
//检查集合中的每个el
required.each（function（）{
if（$（this）.not（'：checkbox，：radio'）。 val（）|| $（this）.filter（'：checked'）。val（））flag ++;
}）;
//如果非空（非检查）字段的数量== nubmer of required （'flag'required.length-1）$（'input [type = submit]'）。prop（'disabled'，false）;
else $（'输入[type = submit]'）。prop（'disabled'，true）;
}）;
}）;
working DEMO
编辑正如我妻子注意到的那样（谢谢你，我爱你，亲爱的 ）这个例子没有正确使用复选框和单选按钮，因为即使未选中，它们也总是返回它们的正值。所以我更新了我的代码和演示，并且希望解释差异。首先，我改变了条件，现在看起来像 if（$（this）.not（'：checkbox，：radio'）。val（）|| $（this）.filter（'：在第一部分中，我们删除所有复选框和单选按钮，第二部分我们检查所有checked输入的值（这意味着所有检查过的输入，在第一部分删除）。
下一个不整齐的步骤是使用一个数字，如 required.length-1 手动减少所有不必要的无线电字段的数量我还在努力寻找更好的解决方案，但现在您可以检查 新演示
Hello Kind People of StackExchange,
I have encountered a stumbling block over some code I'm working with and I have included a collapsed example of the HTML I am working with in the hope that you might be able to kindly help me piece together the remaining jQuery portion.
The objective here is to keep the submit button disabled until ANY element with a class of .Required has some sort of value or other attribute such as "checked". So the solution needs to cover select, radio, checkbox, textbox and textarea elements (those elements will have the Required class).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="someaction/action" method="post" class="DisableSubmit">
<input type="text" name="title" maxlength="100" autofocus="true" placeholder="Title..." value="" style="width: 90%;" />
<textarea name="text" rows="3" style="width: 90%;"></textarea>
<input type="text" name="title" maxlength="100" placeholder="Location..." value="" class="Required" style="width: 90%;" />
<p class="explain">Required</p>
<label for="i_agree">
<span class="label">I agree to the terms and conditions:</span>
<input type="checkbox" id="i_agree" class="Required" />
</label>
<p class="explain">Required</p>
<input type="submit" class="button" value="Submit" />
</form>
I know how to handle this if all the fields are the same type, but struggling with this current scenario. Any advice as ever is gratefully received.
Many thanks
I'd use more HTML5-like style
$(document).ready(function() {
var required = $('[required]');
// bind change for all you just click, and keyup for all textfields
required.bind('change keyup', function() {
var flag = 0;
// check every el in collection
required.each(function() {
if ($(this).not(':checkbox, :radio').val() || $(this).filter(':checked').val()) flag++;
});
// if number of nonempty (nonchecked) fields == nubmer of required fields minus one excess radio input
if (flag==required.length-1) $('input[type=submit]').prop('disabled',false);
else $('input[type=submit]').prop('disabled', true);
});
});
working DEMO
EDIT As my wife noticed (thank you, I love you, darling) this example is not working with checkboxes and radio buttons correctly, because even unchecked, they always return their positive value.
So I updated my code and demo and I want to explain the difference. First of all, I changed condition, now it looks like if ($(this).not(':checkbox, :radio').val() || $(this).filter(':checked').val()) - in the 1st part we delete all checkboxes and radio buttons from collection, and in the 2nd we check value of all "checked" inputs (that means all checked inputs, deleted in 1st part).
The next untidy step is to use a number, like required.length-1 to reduce number of all unnecessary radio fields manually
I'm still trying to find better solution, but now you can check this new demo
这篇关于使用jQuery，保持表单的提交按钮被禁用，直到所有必需的文本框，收音机，复选框元素都有值（或被选中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
