Question

我想停止查看动态添加到页面的div元素。

我的代码是这样的：如果if statement为true，请停止查看更多div元素

我怎么能这样做？

此功能限制勾选复选框：

    function disableCheck() {
        document.getElementById("world").disabled = true;

}
    function checkboxlimit(checkgroup, limit){
        var checkgroup=checkgroup
        var limit=limit
        for (var i=0; i<checkgroup.length; i++){
            checkgroup[i].onclick=function(){
            var checkedcount=0
            for (var i=0; i<checkgroup.length; i++)
                checkedcount+=(checkgroup[i].checked)? 1 : 0

            if (checkedcount>limit) {
             disableCheck();
            this.checked=false;


                }

            }
        }
    }

例如，我们将limit设置为2.但是在勾选第三个checkbox后，它不会被检查，但会显示div标记。

完整代码：

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".red").toggle();
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle();
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle();
        }
    });
});
</script>
<script type="text/javascript">

function disableCheck() {
    document.getElementById("world").disabled = true;

}
function disablediv() {
    document.getElementById("red").style.display = "none";


}

function checkboxlimit(checkgroup, limit){
    var checkgroup=checkgroup
    var limit=limit
    for (var i=0; i<checkgroup.length; i++){
        checkgroup[i].onclick=function(){
        var checkedcount=0
        for (var i=0; i<checkgroup.length; i++)
            checkedcount+=(checkgroup[i].checked)? 1 : 0

        if (checkedcount>limit) {
         disableCheck();
        this.checked=false;


            }

        }
    }
}

</script>
</head>
<body>
    <div>
    <form id="world" name="world">
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    </form>
    <div class="red box" id="red">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<script type="text/javascript">

checkboxlimit(document.forms.world.colorCheckbox, 2)

</script>
    </body>
</html>

Answer 1

您可以在Javascript中使用三元：运算符来通过Element.style.display进行验证。

ELEMENT.style.display = dosomething ? true : 'none'  ;

Cool link about ternary operators (MDN)

如何禁用动态查看div元素？

1 个答案: