首页 > 程序开发 > web前端 > JavaScript >

禁止组选,同类选中

2017-01-10

禁止组选,同类选中。

<!DOCTYPE HTML>  
<html lang="zh-CN">  
  
    <head>  
        <meta charset="UTF-8">  
        <title>Hello World!</title>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
        <meta name="keywords" content="">  
        <meta name="description" content="">  
        <meta name="apple-mobile-web-app-capable" content="no">  
        <meta name="format-detection" content="telephone=no">  
        <link rel="stylesheet" type="text/css" href="../css/style-index.css">  
    </head>  
  
    <body>  
        <h1>Hello World!</h1>  
  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="aa" data-radio="aa">  
            aa  
            </label>  
        </div>  
  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="bb" data-radio="bb">  
            bb  
            </label>  
        </div>  
  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="cc" data-radio="cc">  
            cc        </label>  
        </div>  
        <hr>  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="aa" data-radio="aa">  
            aa  
            </label>  
        </div>  
  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="bb" data-radio="bb">  
            bb  
            </label>  
        </div>  
  
        <div>  
            <label for="">  
                  
            <input type="checkbox" class="cc" data-radio="cc">  
            cc  
            </label>  
        </div>  
  
        <script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            $("input[type=checkbox]").on("click", function() {  
                  
                var checkbox_radio = $(this).attr("data-radio");  
              
                var _radio = $("." + checkbox_radio);  
                          
                if(this.checked) {  
                    console.log(3333);  
                    _radio.attr("disabled", "disabled");  
                    $(this).removeAttr("disabled");  
                } else {  
                    console.log(444)  
                    _radio.removeAttr("disabled");  
                }  
  
            });  
        </script>  
    </body>  
  
</html>
相关文章
最新文章
热点推荐