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

这可能吗?

推荐答案

一些说明:

1. 在下一个代码段中，我假设必须先填写所有输入(单选按钮除外)，然后才能提交表单，这不一定代表所有现实情况.
2. 如前所述，对无线电(在此示例中只有2个)进行了特殊处理，因为每个组只能选择一个.
3. 关于< select> ，如果选择了一个空选项(如果存在)，则该选项将被视为无效.在此示例中，您的select标记始终具有非空值，我在标记中添加了另一个值以显示其行为.

1. 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.
2. As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
3. 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屋！