如何用JS/jQuery预选中并禁用指定随机ID复选框？

我来帮你搞定这个问题！核心问题是之前的选择器范围太广，导致误禁用了所有输入框，咱们只需要精准定位到目标复选框就行——也就是父容器是#cb-selection、且name="mycb"的那些复选框，再根据value筛选出要处理的项。

原生JavaScript方案（无需依赖库） #

这个方案纯原生，兼容性好，适合不想引入额外库的场景：

document.addEventListener('DOMContentLoaded', function() {
  // 定义需要预选中并禁用的value列表，按需修改
  const targetValues = ['Check1', 'Check3'];
  
  // 精准锁定目标复选框：仅选择#cb-selection容器内、name为mycb的input
  const checkboxes = document.querySelectorAll('#cb-selection input[name="mycb"]');
  
  // 遍历复选框，匹配目标value后设置状态
  checkboxes.forEach(checkbox => {
    if (targetValues.includes(checkbox.value)) {
      checkbox.checked = true; // 标记为预选中
      checkbox.disabled = true; // 禁用，无法取消选中
    }
  });
});

代码说明： #

• DOMContentLoaded确保DOM完全加载后再执行代码，避免出现找不到元素的情况
• document.querySelectorAll('#cb-selection input[name="mycb"]')严格限定了操作范围，只会处理指定容器内的目标复选框，不会影响页面其他输入框
• targetValues数组可灵活修改，把需要设置的复选框value填入即可

jQuery方案（如果项目已引入jQuery） #

如果你的项目已经用了jQuery，代码会更简洁：

$(document).ready(function() {
  const targetValues = ['Check1', 'Check3'];
  
  // 精准筛选目标复选框，一次性设置选中和禁用状态
  $('#cb-selection input[name="mycb"]').filter(function() {
    return targetValues.includes($(this).val());
  }).prop({
    checked: true,
    disabled: true
  });
});

重要注意事项： #

被禁用的表单元素默认不会被提交到服务器，如果需要把这些预选中的值也同步提交，你可以额外添加对应的隐藏输入框，比如：

<!-- 针对Check1添加隐藏输入框，确保值能被提交 -->
<input type="hidden" name="mycb" value="Check1">

这样即使复选框被禁用，对应的值依然会随表单一起提交。

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