javascript - jquery提交按钮禁用/ 启用

  显示原文与译文双语对照的内容

我有这个 html:


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

如何执行以下操作:

  • 当文本字段为空时,提交应该被禁用( disabled="禁用") 。
  • 在文本字段中键入内容以删除已经禁用的属性时。
  • 如果文本字段变为空,提交按钮应该再次禁用。

我尝试了这样的方法:


$(document).ready(function(){
 $('input[type="submit"]').attr('disabled','disabled');
 $('input[type="text"]').change(function(){
 if($(this).val!= ''){
 $('input[type="submit"]').removeAttr('disabled');
 }
 });
 });

但它不起作用,任何想法? 谢谢。

时间:

问题是,更改事件触发只有当焦点离开输入(e。g。 有人从它的输入或者标签中点击) 。 尝试使用 keyup:


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


$(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");
 }
}

eric,当用户输入文本时,你的代码似乎不起作用,然后删除所有文本。 如果遇到同样的问题,我创建了另一个版本。 大家来吧


$('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');
 }
})

这个问题已经 2年了,但仍然是一个不错的问题,它是第一个谷歌结果。 但是所有现有的答案建议设置和移除 HTML属性 ( removeAttr ( )""已经禁用"") 禁用)。 关于属性 vs 属性有很多混淆。

HTML

"已经禁用"中 <input type="button" disabled> 在标记称为由w3c布尔属性。

HTML vs DOM

报价:

属性在DOM中;属性在解析为DOM的HTML中。

http://stackoverflow.com 7572855/664132

jQuery

关联:

但是,对于checked属性,最重要的概念是它不对应于checked属性。 属性实际上对应于defaultChecked财产和只应该用于设置初始值复选框。 选中的属性值不会随复选框的状态而改变,而选中的属性会。 因此,确定复选框是否选中的cross-browser-compatible方法是使用属性。。

相关:

属性通常会影响DOM元素的动态状态,而不会更改序列化的HTML属性。 示例包括输入元素的值属性,输入和按钮的禁用属性或者复选框的checked属性。 .prop() 方法应该用于设置残疾人和检查而不是. attr() 方法。


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


对于禁用时的禁用部分问题: 有一个叫做"输入"的事件,但是浏览器支持是有限的,它不是一个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'
 if ($(this).val()!= '') {
 $submit.prop('disabled', false);
 }
 });
});

要删除禁用的属性,


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

要添加禁用的属性,


$("#elementID").prop("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 %>

你也可以使用类似这样的东西:


$(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);
 }
 });
});

下面是 Live示例

上面的答案没有地址也不检查基于剪切/粘贴事件的菜单。 下面我用来做这两个代码的代码。 注意操作实际发生超时,因为削减和过去的事件实际上火灾发生变化之前,所以超时给一点时间发生。


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

如果按钮本身是一个jQuery样式按钮( 使用. button()),则需要刷新按钮的状态,以便在删除/添加已经禁用的属性后添加/删除) 。


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

...