Question

我有一系列帖子。每个帖子都有一个textarea（输入文本）和一个取消和提交按钮。最初，提交按钮被禁用，直到写入一些文本。

尽管如此，当我首先在一个textarea中输入一些文字时，所有提交button的帖子都会启用，而不只是在帖子输入中的那个。

我的JavaScript代码：

  $('.small-textarea').click(function() {

        $('.btn-info').attr('disabled','disabled');
        $(this).addClass("set-large");
        $('.set-large').keyup(function() {
            var $this = $('.set-large');
            if($(this).val() == '') {
               $('.btn-info').attr('disabled','disabled');
            }
            else {
              $('.btn-info').removeAttr('disabled');
            }
        });

  });

HTML：

<div id="footer-condensed-replies" class="footer-condensed">
    <!--<input class="input-xlarge" type="text" placeholder="Reply to @Gerardo">-->
    <textarea class="small-textarea" type="text" placeholder="Reply to @Gerardo"></textarea>
    <div id="" class="footer">
        <div id="" class="footer-submit-button">
            <button type="button" id="cancel" class="btn" data-value="Cancel">Cancel</button>   <span id="footer-btn-margin"></span>

            <button id="hunch" class="btn btn-info" type="button" data-value="Submit">Submit</button>
        </div>
    </div>
</div>

Answer 1

没有看到你的标记，这是一种方式：

如果你的标记是这样的：

<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />
<br/>
<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />
<br/>
<input type="text" class="small-textarea" />
<input type="button" class="btn-info" value="Submit" />

您可以执行此操作：由于该按钮位于文本框旁边，因此您将使用.next()选择并仅定位该按钮，但不是全部。

$('.small-textarea').click(function () {
    $(this).addClass("set-large").next('.btn-info').prop('disabled', true);
});

$(document).on('keyup', '.set-large', function () { // Use another container that holds these elements in instead of document
    $(this).next('.btn-info').prop('disabled', $(this).val() == '');
});

使用prop代替attr
不要在没有解除绑定的情况下在另一个事件中注册click事件，它最终会为您的元素创建重复的keyup处理程序。您可以使用.on() 1.7+或.live()旧版本来使用事件委派。
使用相对目标而不是选择可以选择所有目标的类名。

<强>更新

使用您的标记，您可以执行此操作：

$('.small-textarea').click(function () {
    $(this).addClass("set-large").next().find('.btn-info').prop('disabled', $(this).val() == '');
});
$(document).on('keyup', '.set-large', function () {
    var $this = $(this);
    $(this).next().find('.btn-info').prop('disabled', $(this).val() == '');
});

<强> Demo

Answer 2

使用prop（）而不是attr（）....和$(this).parent().find('.btn-info')来获取提交按钮

试试这个

$('.small-textarea').click(function() {

    $('.btn-info').prop('disabled',true);
    $(this).addClass("set-large");
 });

$('.set-large').keyup(function() {
        if($(this).val() == '') {
           $(this).parent().find('.btn-info').prop('disabled',true);
        }
        else {
          $(this).parent().find('.btn-info').prop('disabled',false);
        }
    });

jquery按钮只能在一个帖子中启用

2 个答案: