jQuery对话框内Checkboxes复选框不可见的问题求助

问题排查与解决方法 #

你遇到的jQuery UI复选框不可见的问题，可按照以下步骤逐一排查修复：

• 检查依赖引入是否完整正确
  必须按顺序引入三个资源：jQuery核心库、jQuery UI的JS文件、jQuery UI对应的主题CSS文件，缺少主题CSS是最常见的诱因——组件会默认隐藏原生复选框，依赖CSS渲染自定义样式，缺失CSS就会出现复选框完全不可见的情况。
• 检查是否添加了组件初始化代码
  仅写HTML结构无法生效，需要在页面DOM加载完成后调用初始化方法：

  $(function() {
    $("input[type='checkbox']").checkboxradio();
  });
  

• 检查标签属性匹配情况
  确认所有<label>的for属性和对应<input>的id完全一致，没有拼写错误、id重复的问题。
• 排查CSS冲突
  打开浏览器开发者工具，检查复选框元素是否被自定义CSS设置了display: none、opacity: 0、z-index过低等属性，导致被隐藏或遮挡。
• 检查版本兼容性
  确认你使用的jQuery版本和jQuery UI版本匹配，当前jQuery UI 1.13.x稳定版兼容jQuery 1.7~3.6版本，版本不匹配会导致组件初始化失败。

完整可运行参考代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 引入jQuery UI主题CSS -->
  <link rel="stylesheet" href="jquery-ui.min.css">
  <!-- 引入jQuery核心库 -->
  <script src="jquery.min.js"></script>
  <!-- 引入jQuery UI JS库 -->
  <script src="jquery-ui.min.js"></script>
  <script>
  // 页面加载完成后初始化组件
  $(function() {
    $("input[type='checkbox']").checkboxradio();
  });
  </script>
</head>
<body>
  <fieldset>
    <legend>Hotel Ratings: </legend>
    <label for="checkbox-1">2 Star</label>
    <input type="checkbox" name="checkbox-1" id="checkbox-1">
    <label for="checkbox-2">3 Star</label>
    <input type="checkbox" name="checkbox-2" id="checkbox-2">
    <label for="checkbox-3">4 Star</label>
    <input type="checkbox" name="checkbox-3" id="checkbox-3">
    <label for="checkbox-4">5 Star</label>
    <input type="checkbox" name="checkbox-4" id="checkbox-4">
  </fieldset>
</body>
</html>

内容的提问来源于stack exchange，提问作者Eliana Lopez