Question

我有一个jsfiddle here。

的的jQuery 的

$(function() {
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup', function() {
        $('form .create-playlist-button')
            .attr('disabled', $('form :input[type="text"]').val().length == 0);
    });
});

需要

当我开始在文本框中输入数据时，应启用创建。
当我从文本框中删除所有文本时，应禁用创建。

我是jQuery的新手，这件事对我不起作用。

Answer 1

$('form :input[type="text"]').live('keyup', function() {
      var val = $.trim(this.value); // this.value is faster than $(this).val()
      $('form .create-playlist-button').prop('disabled', val.length == 0);
});

<强> DEMO

在这里，我使用 .prop() 而不是 .attr() ，根据jQuery doc .prop()应该使用。我还使用 .trim() 从值的开头和结尾删除空格。

关于您的代码

在您的代码中，您使用了$('form :input[type="text"]')两次，一次用于绑定事件，另一次用于获取文本字段的值。但这不是必需的，因为在keyup内，事件处理函数this将引用input事件绑定的keyup元素。

如果您出于任何目的需要多次使用任何选择器，最好将其缓存在变量中并重用该变量。仅举例：

var input = $('form :input[type="text"]');
input.on('click', function() {
      alert( this.value );
      input.addClass('something');
});

如果您对委托事件处理程序使用 .on() 而不是.live()会更好，因为{@ 1}}已被弃用。

您可以使用.live()，如下所示：

.on()

注意

委托事件处理的$('form').on('keyup', ':input[type="text"]', function() { var val = $.trim(this.value); $('form .create-playlist-button').prop('disabled', val.length == 0); });语法如下：

.on()

这里，$(staticContainer).on( eventName, target, handlerFunction )指向页面加载时属于DOM的元素，即不是动态的元素，也是要绑定事件的staticContainer容器。

只是为了更多人去这里

Answer 2

更新：

$(function(){
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup',function(){   
            $(this).closest('form').find('.create-playlist-button').prop('disabled',$(this).val().length==0);
     });
});

在“keyup”处理程序中，您使用this（或$(this)通过jQuery使用它）来获取实际涉及的文本字段。我还更改了代码，以确保您找到正确的“伴侣”按钮。它查找父元素链以查找封闭的<form>，然后在该表单中找到该按钮。

不推荐使用分配事件处理程序的方式。它应该是：

    $('form').on('keyup', ':input[type="text"]', function(){ ...

此外，如果您检查“按键”而不是“键盘”，则您将修复错误，其中按钮在第二个字符之前不起作用。

编辑 - 哦还有一件事：您通常应该使用.prop()来更新属性，而不是.attr()。关于较新的jQuery API，这是一个令人困惑的事情，但是你需要使用.attr的时间很少见。不幸的是，有很多旧的教学材料在jQuery 1.6发布之前被写回来了。

Answer 3

你应该使用.change（）方法！

在里面，juste做了一个测试：

if ($(this).val().length > 0)
...
else
...

Answer 4

这里你去...使用你原来的小提琴：

http://jsfiddle.net/9kKXX/4/

Answer 5

只需要做一些小改动。

$(function(){
//var input = $('form :input[type="text"]')
$('form :input[type="text"]').live('keyup',function(){   
        $('form .create-playlist-button').attr('disabled',$(this).val().length==0);
 });
 });

小提琴：http://jsfiddle.net/9kKXX/36/

jQuery：在输入字段中输入文本时，不启用该按钮

5 个答案:

关于您的代码

注意

只是为了更多人去这里