Javascript 使用jQuery禁用submit按钮，直到所有字段都有值（输入、单选、选择、复选框）

我有一个表格，有几个不同的字段类型，所有这些都需要在提交前完成。我禁用了submit按钮，并希望在所有字段都有值后删除disabled属性

我从前面的问题中找到了与和一起使用此功能的示例，并且我已经阅读了一些答案，这些答案显示了如何仅使用

字段来实现此功能：

但是，我们有没有办法使用jQuery检查所有字段类型是否都有值？是否包括

和

字段

这是我的表单的基本版本和我的HTML：

<div class="contact-form">
    <div class="contact-form__row">
        <p>Text field</p>
        <input type="text" />
    </div>
    <div class="contact-form__row">
        <p>Radio fields</p>
        <label for="radio-1">Radio 1</label>
        <input id="radio-1" type="radio" name="radio-option" />
        <label for="radio-2">Radio 2</label>
        <input id="radio-2" type="radio" name="radio-option" />
    </div>
    <div class="contact-form__row">
        <p>Checkbox fields</p>
        <label for="checkbox-1">Checkbox 1</label>
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input id="checkbox-2" type="checkbox" />
    </div>
    <div class="contact-form__row">
        <p>Select options</p>
        <select id="my-select" name="my-select">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
        </select>
    </div>
    <div class="contact-form__row">
        <p>Text area</p>
        <textarea></textarea>
    </div>
    <div class="contact-form__row">
        <input type="submit" value="Submit" disabled />
    </div>
</div>

文本字段

无线电场

第一台
第二台
复选框字段

复选框1
复选框2
选择选项

方案A
方案B
文本区

---

这是可能的吗？

您可以用jQuery这样做：（在codepen中用此代码替换所有javascript，我已经在您的codepen中测试过了）

$（函数（）{
$（'.contact form'）。on（'input'，'：input'，function（）{
变量输入=$（'.contact form:input'）；
var num_inputs=inputs.length；
var num_filled=inputs.filter（函数（）{return！！this.value}）.length；
$（'.contact form:submit'）.prop（'disabled'），（num_filled几句话：

在下一段代码中，我假设在使表单可提交之前必须填写所有输入（单选按钮除外），这不一定代表所有真实场景
如上所述，由于每组只能选择一台收音机，因此对收音机（在本例中仅2台）进行了特殊处理
关于
s，如果选择了空选项（如果存在），则该选项将被视为无效。在本例中，您的select标记始终具有非空值，我在标记中添加了另一个值以显示其行为
让我知道它是否有效


$（文档）.ready（函数（）{
$（“：input”）.on（'input'，function（）{validate（）；}）；
$（“：input”）.on（'change'，function（）{validate（）；}）；
});
函数验证（）{
var$submitButton=$（“输入[type=submit]”）；
var isValid=true；
如果（$（':checkbox:checked'）.length！=$（':checkbox'）.length）
isValid=false；
else if（$（':radio:checked'）。长度==0）
isValid=false；
否则{
$（'input:text，textarea'）。每个（函数（）{
if（$（this.val（）=''）{
isValid=false；
返回false；
}
});
如果（有效）{
$（'select'）。每个（函数（）{
if（$（this.val（）=''）{
isValid=false；
返回false；
}
});
}
}
$submitButton.prop（“已禁用”！isValid）；
}
。联系方式{
宽度：400px；
利润率：50像素；
}
.联系人-表格_行{
填充：0 10px；
边距：0 0 10px；
边框底部：1px纯色灰色；
}
p{
字体大小：粗体；
}

文本字段

无线电场

第一台
第二台
复选框字段

复选框1
复选框2
选择选项

方案A
方案B
方案A
方案B
文本区

你有没有看过无需重新发明轮子这个插件应该可以满足你的所有需求？这是一个开始-你必须对复选框和选择框进行创新。只使用前面提到的jQuery验证插件会容易得多。如果你有
表单
标签，例如
而不是f
@TaufikNurRahmanda这不是这个想法的问题，最终会有一个
包装器。我的意思是我们可以将jQuery
change
事件监听器放在
元素中，但在这种情况下，我们将事件监听器放在所有
输入上，无论它是
文本区
，
选择
，等等你可能是对的，这并不重要，因为jQuery有
：输入
选择器。这几乎可以工作。当你完成所有字段时，提交按钮将根据请求启用。但是，如果你返回并取消选中每个复选框，提交按钮将保持启用状态。我明白了，请在我的上面的代码返回$（this）.is（':checkbox'）？$（this）.is（':checked'）：！！this.value
并查看它是否按照您的需要工作
<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>