Question

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

<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>

jqueryCode：

            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);
        }
});

请注意，button元素已更改为输入字段元素。更容易使用，特别是在启用/禁用等时。

除非您使用的是jQuery版本＆lt; 1.6，使用.prop()代替.attr()来禁用按钮：

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

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

来源：

.prop() vs .attr()

Jquery使用多种形式

1 个答案: