如何将只读复选框设置为disabled=true？已尝试代码未生效

首先得明确一点：HTML里的复选框（<input type="checkbox">）的readonly属性其实不会阻止用户勾选/取消操作，只有disabled才会真正让它变成不可交互状态。你遇到的prop("disabled", true)没生效的问题，大概率是这几个原因，咱们一个个排查：

• 确认选择器和jQuery加载是否正常
  先打开浏览器控制台，执行以下代码看看能不能选中目标元素：

  console.log($(".FlagClass"));
  

  如果输出的jQuery对象长度是0，说明要么class名写错了，要么元素还没加载到DOM里。这时候要检查：

  • 复选框的class是不是真的是FlagClass（注意大小写，类名是区分大小写的）
  • 确保你的代码是在DOM加载完成后执行的，比如用$(document).ready()包裹：

    $(document).ready(function() {
      $(".FlagClass").prop("disabled", true);
    });
    

• 如果是动态生成的元素
  要是这个复选框是通过AJAX、模板渲染等方式动态添加到页面的，那页面初始化时执行的代码根本找不到它。这时候可以把代码放在元素生成后的回调里，或者用事件委托监听DOM变化：

  // 比如在动态渲染完成后立即执行
  function renderCheckbox() {
    // 这里是生成复选框的代码
    $(".FlagClass").prop("disabled", true);
  }
  

• 移除多余的readonly属性
  虽然你的目标是设置disabled，但存在的readonly属性可能和其他代码产生冲突，不如一并移除它，确保disabled能正常生效：

  $(".FlagClass").prop({
    "disabled": true,
    "readonly": false
  });
  

• 直接操作原生DOM兜底
  如果jQuery的prop方法还是不生效，试试直接操作原生DOM元素的属性，有时候这种方式更直接：

  $(".FlagClass").each(function() {
    this.disabled = true;
    this.readOnly = false; // 手动移除readonly
  });
  

另外，你可以在控制台手动执行$(".FlagClass").prop("disabled", true)，然后去Elements面板看复选框的disabled属性有没有加上，这样能快速判断是代码执行时机的问题，还是选择器的问题。

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