如何在jquery中检查“是否单击了任何一个或所有按钮”

Question

我希望使用jquery启用和禁用按钮。

根据我的代码，我有几组“接受”和“拒绝”按钮和1“授权”按钮，因此按照逻辑，当所有“接受”按钮都被“接受”时，应该启用“接受”按钮，如果单击了一个拒绝按钮，就应该拒绝授权按钮。

你能帮我检查一下“是否有任何一个或所有的按钮被点击”。

下面是我的代码：

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

这里如果相同的Fiddle： http://jsfiddle.net/QvB37/

我也尝试过使用.length，但我不知道如何在逻辑中使用它。

请建议一下。

Answer 1

只要稍微修改一下HTML，您就可以在一个函数中简化代码，以便接受和拒绝。见下文，

注：

1. 使用id 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);
    }
}

更新演示： http://jsfiddle.net/jG6Ue/

Answer 2

只测试可见类的长度如何？

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

Answer 3

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