jquery按钮只在一篇文章中启用

jquery button enabling just in one post

本文关键字：一篇 文章 启用 按钮 jquery      更新时间：2023-09-26

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

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

假设你的标记是这样的：

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

演示

使用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);
        }
    });
相关文章：