Question

使用JQuery复选框时遇到问题。我想在用户仅在draft_checkbox中检查时显示该按钮。我尝试使用草稿复选框点击。但是，它只能显示/隐藏在草稿复选框中。当我点击其他复选框时，它仍然显示。我只想在用户检查草稿复选框时显示按钮。如果用户同时检查两者，我想隐藏。

这是我的剧本，

<script type="text/javascript">
       $(document).ready(function() {                
           $('#draft').click(function () {
                if($("#draft").is(':checked')){
                    $('#btnApprovepo').css('visibility','visible');                    
                }else{
                    $('#btnApprovepo').css('visibility','hidden');                                             
                }
            });
        });
</script> 

<div id="status_div">
    <input type="checkbox" class="po_status" name="status" id="draft" value="d" checked="checked"/> Draft<br />
    <input type="checkbox" class="po_status" name="status" id="pending" value="n" /> Pending <br />
    <input type="checkbox" class="po_status" name="status" id="submit" value="s" /> Submitted <br />
    <input type="checkbox" class="po_status" name="status" id="pAck" value="c" /> Partial Ack <br />
    <input type="checkbox" class="po_status" name="status" id="ack" value="a" /> Acknowledged <br />
    <input type="checkbox" class="po_status" name="status" id="partial" value="p" /> Partial Delivered <br />
    <input type="checkbox" class="po_status" name="status" id="delivered" value="e" /> Delivered <br />
    <input type="checkbox" class="po_status" name="status" id="void" value="v" /> Void <br />
    <input type="checkbox" class="po_status" name="status" id="reject" value="r" /> Reject <br />
</div>

这是我的按钮，

<input type='button' value='Button' name='Button' id='btnApprovepo' />

Answer 1

小提琴：

<强> http://jsfiddle.net/XqXL9/2/

$('.po_status').click(function () {
    if($(".po_status:checked").length === 1 && $("#draft").is(":checked") == true){
         $('#btnApprovepo').show();
    } else {
         $('#btnApprovepo').hide(); 
    }
});

一些最好的实践：

使用triple ===进行精确比较。
如果有的话，请使用类，而不是匹配的标记。
能见度只是让它看不见但却占据了空间。 Is that what you need?。
在大括号之间包含代码，即使它是单行代码

Answer 2

试试这个，

这是jsfiddle http://jsfiddle.net/iamrmin/zCkKc/

$(document).ready(function() {                
    $('#status_div input[type=checkbox]').click(function () {
        if($("#status_div :checked").length == 1 && $("#draft").is(":checked") == true)
            $('#btnApprovepo').show();
        else
            $('#btnApprovepo').hide()
    });
});

我不知道为什么使用visibility css。可能是要求。但我建议您使用.show()和.hide()来切换可见性。

Answer 3

我认为你可以这样做...... 这是FIDDLE

    <script type="text/javascript">
    $(document).ready(function(){
        $("#draft").click(function(){
            if($(this).is(':checked')){
                $('#btnApprovepo').css("visibility","visible");
            }
            else
            {
                $('#btnApprovepo').css("visibility","hidden");
            }
        });
    });
</script>

如何在JQuery上的一个特定复选框上显示或隐藏按钮？

3 个答案: