Jquery 使用多种形式

Question

我在一个 php 页面中使用 php 代码生成多个表单，其中每个表单都有一个 textarea 输入和一个按钮。一旦输入了一个值，该按钮将被启用，其空按钮将被禁用。我发现很难使用它们的 id 触发 textarea 和 button，因为 php 代码正在生成不同类型的未知数量的表单。有没有其他方法可以触发表单，它的按钮和文本区域输入能够禁用/启用按钮？

<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>
    <form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>

jquery代码：

            jQuery("document").ready(function ($) {
            var $register = $("button[name='post-Comment']");
            //$register.attr('disabled', true);
            $("textarea[name='txtcomment']").keyup(function () {
                var trigger = false;
                $("textarea[name='txtcomment']").each(function() {
                    if ($(this).val() === '') {
                        trigger = true;
                    }
                });
                if (trigger) {
                    $register.attr('disabled', 'disabled');
                } else {
                    $register.removeAttr('disabled');
                }
            });
        });

Answer 1

这就是你想要的效果吗？

jsFiddle Demo

HTML：

<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>

jQuery：

$('.btn').prop('disabled',true);

$("textarea[name='txtcomment']").keyup(function () {
        if ($(this).val() != '') {
            $(this).closest('form').find('.btn').prop('disabled', false);
        }else{
            $(this).closest('form').find('.btn').prop('disabled', true);
        }
});

---

请注意，按钮元素已更改为输入字段元素。更容易使用，尤其是在启用/禁用等时。

除非您使用的是 jQuery .prop() 而不是 .attr() 来禁用按钮：

$register.attr('disabled', 'disabled'); //DO NOT USE THIS

$register.prop('disabled', true);  //USE THIS METHOD

来源：

.prop() vs .attr()