如何在jquery中检查“如果点击了任何一个或所有按钮”

Question

我想使用jquery启用和禁用按钮。

根据我的代码，我有几组“Accept”和“Reject”按钮以及1个“Authorize”按钮，因此根据逻辑，当所有“Accept”按钮都是“Accepted”时，应启用“Authorize”按钮如果单击“拒绝”按钮，则应拒绝“授权”按钮。

请您帮我检查“如果点击任何一个或所有按钮”。

这是我的代码：

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content-1">
    <div class="rx-statusbuttons">
        <input type="button" value="Accepted" class="Accepted" />
        <input type="button" value="Rejected" class="Rejected redButton" />
    </div>
    <div class="rx-statusMessage">
        <p class="rx-statusAccepted nodisplay">Accepted</p>
        <p class="rx-statusRejected nodisplay">Rejected</p>
    </div>
</div>
</div>
<div id="content-2">
    <div class="rx-statusbuttons">
        <input type="button" value="Accepted" class="Accepted" />
        <input type="button" value="Rejected" class="Rejected redButton" />
    </div>
    <div class="rx-statusMessage">
        <p class="rx-statusAccepted nodisplay">Accepted</p>
        <p class="rx-statusRejected nodisplay">Rejected</p>
    </div>
</div>
</div>
<div id="content-3">
    <div class="rx-statusbuttons">
        <input type="button" value="Accepted" class="Accepted" />
        <input type="button" value="Rejected" class="Rejected redButton" />
    </div>
    <div class="rx-statusMessage">
        <p class="rx-statusAccepted nodisplay">Accepted</p>
        <p class="rx-statusRejected nodisplay">Rejected</p>
    </div>
</div>
</div>
<div style="clear:both"></div>
<br>
<br>
<br>
<input type="submit" value="Authorize" disabled="disabled" id="authorizeButton" />

JQUERY

    $(document).ready(function () {
    $("#content-1 .Accepted").click(function () {
        $('#content-1 .rx-statusbuttons').hide();
        $('#content-1 .rx-statusRejected').hide();
        $("#content-1 .rx-statusAccepted").show();

    });
    $("#content-1 .Rejected").click(function () {
        $('#content-1 .rx-statusbuttons').hide();
        $('#content-1 .rx-statusRejected').show();
        $("#content-1 .rx-statusAccepted").hide();

    });

    $("#content-2 .Accepted").click(function () {
        $('#content-2 .rx-statusbuttons').hide();
        $('#content-2 .rx-statusRejected').hide();
        $("#content-2 .rx-statusAccepted").show();
    });
    $("#content-2 .Rejected").click(function () {
        $('#content-2 .rx-statusbuttons').hide();
        $('#content-2 .rx-statusRejected').show();
        $("#content-2 .rx-statusAccepted").hide();
    });

    $("#content-3 .Accepted").click(function () {
        $('#content-3 .rx-statusbuttons').hide();
        $('#content-3 .rx-statusRejected').hide();
        $("#content-3 .rx-statusAccepted").show();

    });
    $("#content-3 .Rejected").click(function () {
        $('#content-3 .rx-statusbuttons').hide();
        $('#content-3 .rx-statusRejected').show();
        $("#content-3 .rx-statusAccepted").hide();
    });
});

CSS

.nodisplay {
    display:none;
}
#content-1, #content-2, #content-3 {
    float: left;
    width: 200px;
}

此处如果小提琴相同：http://jsfiddle.net/QvB37/

我也尝试使用 .length ，但我不确定如何在我的逻辑中使用它。

请建议。

Answer 1

如何测试可见的班级长度？

function checkIfAccepted() { 
      if($(".rx-statusAccepted:visible").length == 3) {
            $('#authorizeButton').prop('disabled', false);
      }
}

Answer 2

对HTML进行一些更改，您可以在一个函数中为Accept和Reject简化代码。见下文，

注意：

1. 为内容为content-#
的所有容器元素添加了内容类
2. 将条件修改为visible Accepted == Accepted.length
的授权

完整代码：

$(document).ready(function () {
    $(".Accepted").click(function () {
        var $parent = $(this).closest('.content');
        $('.rx-statusbuttons', $parent).hide();
        $('.rx-statusRejected', $parent).hide();
        $('.rx-statusAccepted', $parent).show();
        checkIfAccepted();
    });
    $(".Rejected").click(function () {
        var $parent = $(this).closest('.content');
        $('.rx-statusbuttons', $parent).hide();
        $('.rx-statusRejected', $parent).show();
        $(".rx-statusAccepted", $parent).hide();
    });
});

function checkIfAccepted() {
    if ($(".rx-statusAccepted:visible").length == $(".rx-statusAccepted").length) {
        $('#authorizeButton').prop('disabled', false);
    }
}

更新了DEMO： http://jsfiddle.net/jG6Ue/

Answer 3

您可以尝试使用此$("#authorizeButton").removeAttr("disabled");