jQuery禁用/启用提交按钮
我有这个HTML：
<input type="text" name="textField" /> <input type="submit" value="send" /> 我该如何做这样的事情：
- 当文本字段为空时，应该禁用提交（disabled =“disabled”）。
- 当在文本字段中输入某些内容以删除禁用的属性时。
- 如果文本字段再次变空（文本被删除），则应该再次禁用提交按钮。
我尝试了这样的事情：
$(document).ready(function(){ $('input[type="submit"]').attr('disabled','disabled'); $('input[type="text"]').change(function(){ if($(this).val != ''){ $('input[type="submit"]').removeAttr('disabled'); } }); });
…但它不工作。 有任何想法吗？ 谢谢。
问题在于，只有当焦点从输入移开（例如，有人点击输入或者输出标签）时，更改事件才会触发。 尝试使用键入：
$(document).ready(function() { $(':input[type="submit"]').prop('disabled', true); $('input[type="text"]').keyup(function() { if($(this).val() != '') { $(':input[type="submit"]').prop('disabled', false); } }); });
$(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"); } }
这个问题是2岁，但它仍然是一个很好的问题，这是第一个谷歌的结果…但所有现有的答案建议设置和删除 HTML 属性 （removeAttr（“禁用”））“禁用”，这是不正确的做法。 属性与财产有很多混淆。
HTML
标记中的<input type="button" disabled>中的<input type="button" disabled> 被W3C称为布尔属性 。
HTML与DOM
引用：
属性在DOM中; HTML中的一个属性被分析到DOM中。
https://stackoverflow.com/a/7572855/664132
JQuery的
有关：
不过，关于checked属性最重要的概念是它不对应于checked属性。 该属性实际上对应于defaultChecked属性， 只能用于设置复选框的初始值 。 检查的属性值不会随复选框的状态而变化，而检查的属性值会变化。 因此，确定复选框是否被选中的跨浏览器兼容的方式是使用属性…
相关：
属性通常影响DOM元素的动态状态，而不改变序列化的HTML属性。 示例包括输入元素的值属性，输入和按钮的禁用属性或复选框的checked属性。 .prop（）方法应该用来设置禁用和检查，而不是.attr（）方法。
$( "input" ).prop( "disabled", false );
概要
为了更改DOM属性（如表单元素的禁用状态），请使用.prop（）方法。
（ http://api.jquery.com/attr/ ）
至于关于更改部分的禁用问题：有一个事件称为“输入”，但浏览器支持是有限的 ，它不是一个jQuery事件，所以jQuery不会使它的工作。 更改事件可靠地工作，但在元素失去焦点时被触发。 所以有人可能会把这两者结合起来（有些人也会听音乐和粘贴）。
下面是一段未经测试的代码来展示我的意思：
$(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); }); });
或者对于我们不喜欢使用jQ的每一件小事：
document.getElementById("submitButtonId").disabled = true;
埃里克，当用户输入文本，然后删除所有的文本，你的代码似乎并没有为我工作。 如果有人遇到同样的问题，我创建了另一个版本。 这里你去乡亲：
$('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'); } })
要删除禁用的属性使用，
$("#elementID").removeAttr('disabled');
并添加禁用的属性使用，
$("#elementID").prop("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); } }); });
这里是现场的例子
这是文件输入字段的解决方案。
当文件未被选择时，要禁用文件字段的提交按钮，则在用户选择文件上传后启用：
$(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 %>
如果按钮本身是一个jQuery样式的按钮（带.button（）），则需要刷新按钮的状态，以便在删除/添加disabled属性后添加/删除正确的类。
$( ".selector" ).button( "refresh" );
上面的答案没有解决基于菜单的剪切/粘贴事件。 下面是我用来做这两个的代码。 请注意，动作实际上是在超时之后发生的，因为切换和过去的事件实际上是在更改发生之前触发的，所以超时会为此发生一些时间。
$( ".your-input-item" ).bind('keyup cut paste',function() { var ctl = $(this); setTimeout(function() { $('.your-submit-button').prop( 'disabled', $(ctl).val() == ''); }, 100); });
我不得不做一些工作，以适应我的使用情况。
我有一个表单，在提交之前所有的字段都必须有一个值。
以下是我所做的：
$(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 submit if (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); } }); });
