协慌网

登录 贡献 社区

jQuery 禁用 / 启用提交按钮

我有这个 HTML:

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

我该怎么做这样的事情:

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

我试过这样的事情:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="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);
        }
     });
 });
$(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 年了,但它仍然是一个很好的问题,这是 Google 的第一个结果... 但是所有现有的答案都建议设置和删除 HTML 属性 (removeAttr(“disabled”))“disabled”,这不是正确的方法。关于属性与属性存在很多混淆。

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 属性, 应仅用于设置复选框的初始值 。 checked 属性值不会随复选框的状态而改变,而 checked 属性则会改变。因此,确定是否选中复选框的跨浏览器兼容方式是使用属性...

相关:

属性通常会影响 DOM 元素的动态状态,而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性,输入和按钮的disabled 属性或复选框的 checked 属性。 应该使用. prop()方法来设置 disabled 和 checked 而不是. attr()方法。

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

摘要

要 [...] 更改 DOM 属性,例如表单元素的禁用状态,请使用.prop()方法。

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


关于更改部分问题的禁用:有一个名为 “input” 的事件,但浏览器支持有限,并且它不是 jQuery 事件,因此 jQuery 不会使它工作。 change 事件可靠地工作,但在元素失去焦点时触发。所以可以将两者结合起来(有些人也会听取密钥和粘贴)。

这是一段未经测试的代码,用于表明我的意思:

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