<!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>