禁用jQuery的提交按钮,直到所有字段都具有值(输入,单选,选择,复选框) [英] Disable submit button with jQuery until all fields have values (input, radio, select, checkbox)
问题描述
我有一个包含多个不同字段类型的表单,所有这些字段类型都需要在提交之前完成.我已禁用了提交按钮,并且一旦所有字段都具有值,便想删除禁用的属性.
I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attribute once all the fields have values.
我从以前的问题中获得了有关使用 radios 和复选框,我已经阅读了一些答案,这些答案说明了如何使用< input>
仅字段:
I have examples from previous questions of this functionality working with radios and checkboxes and I've read a few answers which show how to achieve this using <input>
fields only:
但是有什么方法可以使用jQuery检查所有字段类型是否都具有值?包括< select>
和< textarea>
字段?
But is there any way we can get check that all field types have values using jQuery? Including <select>
and <textarea>
fields?
这是我表单的基本版本的 Codepen ,这是我的HTML:>
Here's a Codepen of a basic version of my form and here's my 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>
这可能吗?
推荐答案
一些说明:
- 在下一个代码段中,我假设必须先填写所有输入(单选按钮除外),然后才能提交表单,这不一定代表所有现实情况.
- 如前所述,对无线电(在此示例中只有2个)进行了特殊处理,因为每个组只能选择一个.
- 关于
< select>
,如果选择了一个空选项(如果存在),则该选项将被视为无效.在此示例中,您的select标记始终具有非空值,我在标记中添加了另一个值以显示其行为.
- In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
- As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
- Concerning
<select>
s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.
让我知道它是否有效
$(document).ready(function() {
$(":input").on('input', function(){validate();});
$(":input").on('change', function(){validate();});
});
function validate() {
var $submitButton = $("input[type=submit]");
var isValid = true;
if($(':checkbox:checked').length != $(':checkbox').length)
isValid = false;
else if($(':radio:checked').length == 0)
isValid = false;
else{
$('input:text, textarea').each(function() {
if($(this).val() == ''){
isValid = false;
return false;
}
});
if(isValid){
$('select').each(function() {
if($(this).val() == ''){
isValid = false;
return false;
}
});
}
}
$submitButton.prop("disabled", !isValid);
}
.contact-form {
width: 400px;
margin: 50px;
}
.contact-form__row {
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid grey;
}
p {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<select id="my-select" name="my-select">
<option></option>
<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>
这篇关于禁用jQuery的提交按钮,直到所有字段都具有值(输入,单选,选择,复选框)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!