3

我在这里有一个 jsfiddle 。

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 很陌生，这对我不起作用。

4

5 回答 5

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

演示

在这里，我使用了，.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()委托事件处理程序会更好，因为.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 )

在这里，staticContainer指向在页面加载时属于 DOM 的元素，即它不是动态的，也是target您要在其上绑定事件的容器。

只是为了更多去这里

于 2012-06-30T17:07:51.497 回答
4

更新：

$(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(){ ...

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

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

于 2012-06-30T17:06:51.707 回答
0

您应该使用 .change() 方法！

在里面做一个测试：

if ($(this).val().length > 0)
...
else
...
于 2012-06-30T17:08:58.693 回答
0

来吧......使用你原来的小提琴：

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

于 2012-06-30T17:11:13.733 回答
0

只需稍作改动即可。

$(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/

于 2014-08-22T08:13:40.060 回答