0

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

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

您能否帮助我检查“是否单击了任何一个或所有按钮”。

这是我的代码如下：

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

查询

    $(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但我不确定如何在我的逻辑中使用它。

请建议。

4

3 回答 3

2

只测试可见类的长度怎么样？

function checkIfAccepted() { 
      if($(".rx-statusAccepted:visible").length == 3) {
            $('#authorizeButton').prop('disabled', false);
      }
}
于 2013-11-07T15:59:47.683 回答
1

只需对 HTML 稍作改动，您就可以在一个接受和拒绝的函数中简化代码。见下文，

笔记：

  1. 向所有具有 id 的容器元素添加内容类content-#
  2. 将条件修改为 Authorize with number of 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/

于 2013-11-07T15:52:31.537 回答
0

你可以试试这个$("#authorizeButton").removeAttr("disabled");

于 2013-11-07T16:00:32.183 回答