jQuery禁用/启用提交按钮

$(function() {$(":text").keypress(check_submit).each(function() {check_submit();});});
function check_submit() {if ($(this).val().length == 0) {$(":submit").attr("disabled", true);} else {$(":submit").removeAttr("disabled");}}

问题是更改事件仅在焦点远离输入时触发（例如，有人单击输入或选项卡退出输入）。尝试使用keyup：

$(document).ready(function() {$(':input[type="submit"]').prop('disabled', true);$('input[type="text"]').keyup(function() {if($(this).val() != '') {$(':input[type="submit"]').prop('disabled', false);}});});

埃里克，当用户输入文本然后删除所有文本时，您的代码似乎对我不起作用。如果有人遇到同样的问题，我创建了另一个版本。在这里，伙计们：

$('input[type="submit"]').attr('disabled','disabled');$('input[type="text"]').keyup(function(){if($('input[type="text"]').val() == ""){$('input[type="submit"]').attr('disabled','disabled');}else{$('input[type="submit"]').removeAttr('disabled');}})

这是文件输入字段的解决方案。

要在未选择文件时禁用文件字段的提交按钮，然后在用户选择要上传的文件后启用：

$(document).ready(function(){$("#submitButtonId").attr("disabled", "disabled");$("#fileFieldId").change(function(){$("#submitButtonId").removeAttr("disabled");});});

HTML：

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

或者对于我们来说，不喜欢对每一件小事都使用jQ：

document.getElementById("submitButtonId").disabled = true;

你也可以使用这样的东西：

$(document).ready(function() {$('input[type="submit"]').attr('disabled', true);$('input[type="text"]').on('keyup',function() {if($(this).val() != '') {$('input[type="submit"]').attr('disabled' , false);}else{$('input[type="submit"]').attr('disabled' , true);}});});

这里是直播示例

这个问题是2岁，但它仍然是一个很好的问题，这是第一个谷歌的结果……但所有现有的答案都建议设置和删除超文本标记语言属性（“禁用”）“禁用”，这不是正确的方法。关于属性与属性有很多混淆。

超文本标记语言

标记被W3C称为布尔属性中<input type="button" disabled>中的“禁用”。

超文本标记语言vs. DOM

引用：

属性位于DOM中；属性位于解析到DOM中的超文本标记语言中。

https://stackoverflow.com/a/7572855/664132

jQuery

相关：

尽管如此，关于选中属性要记住的最重要的概念是它不对应于选中的属性。属性实际上对应于复选框的defaultChecked属性和应仅用于设置初始值。选中的属性值不随复选框的状态而变化，而选中的属性会。因此，确定复选框是否被选中的跨浏览器兼容方法是使用属性…

相关：

属性通常会影响DOM元素的动态状态，而不会更改序列化的超文本标记语言属性。示例包括输入元素的value属性、输入和按钮的残疾财产或复选框的选中属性。应该使用. prop（）方法来设置禁用和检查，而不是. attr（）方法。

$( "input" ).prop( "disabled", false );

总结

要[…]更改DOM属性，例如表单元素的[…]禁用状态，请使用. prop（）方法。

（http://api.jquery.com/attr/）

至于问题的disable on change部分：有一个名为“输入”的事件，但浏览器支持有限，它不是jQuery事件，所以jQuery不会使其工作。更改事件可靠地工作，但当元素失去焦点时被触发。所以可以将两者结合起来（有些人也会监听keyup和粘贴）。

这里有一段未经测试的代码来展示我的意思：

$(document).ready(function() {var $submit = $('input[type="submit"]');$submit.prop('disabled', true);$('input[type="text"]').on('input change', function() { //'input change keyup paste'$submit.prop('disabled', !$(this).val().length);});});

上面的答案并没有解决基于菜单的剪切/粘贴事件的检查问题。下面是我用来执行这两项操作的代码。请注意，该操作实际上是超时发生的，因为剪切和过去的事件实际上是在更改发生之前触发的，所以超时给了它一点时间。

$( ".your-input-item" ).bind('keyup cut paste',function() {var ctl = $(this);setTimeout(function() {$('.your-submit-button').prop( 'disabled', $(ctl).val() == '');}, 100);});

要删除禁用的属性使用，

 $("#elementID").removeAttr('disabled');

并添加禁用属性使用，

$("#elementID").prop("disabled", true);

享受：）

如果按钮本身是一个jQuery样式的按钮（带有.按钮（）），则需要刷新按钮的状态，以便在删除/添加禁用属性后添加/删除正确的类。

$( ".selector" ).button( "refresh" );

我不得不做一些工作来使它适合我的用例。

我有一个表单，所有字段在提交之前都必须有一个值。

这就是我所做的：

  $(document).ready(function() {$('#form_id button[type="submit"]').prop('disabled', true);
$('#form_id input, #form_id select').keyup(function() {var disable = false;
$('#form_id input, #form_id select').each(function() {if($(this).val() == '') { disable = true };});
$('#form_id button[type="submit"]').prop('disabled', disable);});});

感谢大家在这里的回答。

看看我的项目中的这个片段

 $("input[type="submit"]", "#letter-form").on("click",function(e) {e.preventDefault();

$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),function(response) {// your response from form submitif (response.result === 'Redirect') {window.location = response.url;} else {Message(response.saveChangesResult, response.operation, response.data);}});$(this).attr('disabled', 'disabled'); //this is what you want

所以在你的操作完成后就关掉了按钮

$(this).attr('disabled', 'disabled');

请参阅下面的代码以启用或禁用提交按钮

如果名称和城市字段具有值，则仅启用提交按钮。

<script>$(document).ready(function() {$(':input[type="submit"]').prop('disabled', true);
$('#Name').keyup(function() {ToggleButton();});$('#City').keyup(function() {ToggleButton();});
});
function ToggleButton() {if (($('#Name').val() != '') && ($('#City').val() != '')) {$(':input[type="submit"]').prop('disabled', false);return true;} else {$(':input[type="submit"]').prop('disabled', true);return false;}} </script>

<form method="post">
<div class="row"><div class="col-md-4"><h2>Getting started</h2><fieldset><label class="control-label text-danger">Name</label><input type="text" id="Name" name="Name" class="form-control" /><label class="control-label">Address</label><input type="text" id="Address" name="Address" class="form-control" /><label class="control-label text-danger">City</label><input type="text" id="City" name="City" class="form-control" /><label class="control-label">Pin</label><input type="text" id="Pin" name="Pin" class="form-control" /><input type="submit" value="send" class="btn btn-success" /></fieldset></div></div></form>

提供了Al类型的解决方案。所以我想尝试不同的解决方案。简单地说，如果您在输入字段中添加id属性，它会更容易。

<input type="text" name="textField" id="textField"/><input type="submit" value="send" id="submitYesNo"/>

这是你的jQuery

$("#textField").change(function(){if($("#textField").val()=="")$("#submitYesNo").prop('disabled', true)else$("#submitYesNo").prop('disabled', false)});

表单登录：

<form method="post" action="/login"><input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" /><input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/><input type="submit" id="send" value="Send"></form>

Javascript：

$(document).ready(function() {$('#send').prop('disabled', true);
$('#email, #password').keyup(function(){
if ($('#password').val() != '' && $('#email').val() != ''){$('#send').prop('disabled', false);}else{$('#send').prop('disabled', true);}});});

如果假设你的输入为空，我们可以简单地拥有if&else. if

if($(#name).val() != '') {$('input[type="submit"]').attr('disabled' , false);}

否则我们可以把假的变成真的

它将像这样工作：

$('input[type="email"]').keyup(function() {if ($(this).val() != '') {$(':button[type="submit"]').prop('disabled', false);} else {$(':button[type="submit"]').prop('disabled', true);}});

确保您的超文本标记语言中有“禁用”属性

Vanilla JS解决方案。它适用于整个表单，而不仅仅是一个输入。

在问题中选择JavaScript标签。

超文本标记语言：

var form = document.querySelector('form')var inputs = form.querySelectorAll('input')var required_inputs = form.querySelectorAll('input[required]')var register = document.querySelector('input[type="submit"]')form.addEventListener('keyup', function(e) {var disabled = falseinputs.forEach(function(input, index) {if (input.value === '' || !input.value.replace(/\s/g, '').length) {disabled = true}})if (disabled) {register.setAttribute('disabled', 'disabled')} else {register.removeAttribute('disabled')}})

<form action="/signup"><div><label for="username">User Name</label><input type="text" name="username" required/></div><div><label for="password">Password</label><input type="password" name="password" /></div><div><label for="r_password">Retype Password</label><input type="password" name="r_password" /></div><div><label for="email">Email</label><input type="text" name="email" /></div><input type="submit" value="Signup" disabled="disabled" /></form>

一些解释：

在这段代码中，我们在html表单和每个按键上添加keyup事件检查所有输入字段。如果我们至少有一个输入字段为空或仅包含空格字符，那么我们将真值分配给禁用的变量并禁用提交按钮。

如果您需要禁用提交按钮，直到填写所有必需的输入字段-替换：

inputs.forEach(function(input, index) {

有：

required_inputs.forEach(function(input, index) {

其中required_inputs已经声明为仅包含必需输入字段的数组。

禁用：$('input[type="submit"]').prop('disabled', true);

启用：$('input[type="submit"]').removeAttr('disabled');

上面的启用代码比以下代码更准确：

$('input[type="submit"]').removeAttr('disabled');

你可以使用这两种方法。

我希望下面的代码能帮助到别人…！！：）

jQuery(document).ready(function(){
jQuery("input[type=submit]").prop('disabled', true);
jQuery("input[name=textField]").focusin(function(){jQuery("input[type=submit]").prop('disabled', false);});
jQuery("input[name=textField]").focusout(function(){var checkvalue = jQuery(this).val();if(checkvalue!=""){jQuery("input[type=submit]").prop('disabled', false);}else{jQuery("input[type=submit]").prop('disabled', true);}});
}); /*DOC END*/

试试看

let check = inp=> inp.nextElementSibling.disabled = !inp.value;

<input type="text" name="textField" oninput="check(this)"/><input type="submit" value="send" disabled />