1

我有一系列的帖子。每个帖子都有一个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>
4

2 回答 2

0

在没有看到您的标记的情况下，这是一种方法：

如果您的标记是这样的：

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

演示

于 2013-07-11T18:39:13.093 回答
0

使用 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);
        }
    });
于 2013-07-11T18:55:10.233 回答