Javascript 为什么自定义单选按钮没有被禁用？

我使用自定义页面上的复选框和单选按钮

这些单选按钮位于

div#Main

元素中，该元素还包含一些其他HTML元素。我需要通过单击按钮（我正在使用）来禁用此

div

中的所有内容。为此，我有以下代码

HTML

<input type="button" id="DisableElements" value="Disable elements" />

<div id="Main">
    <input type="radio" class="styled" name="reg-all"/>
    <input type="radio" class="styled" name="reg-all"/>

    <select id="MyList">
        <option value="1">Choice-1</option>
        <option value="2">Choice-2</option>
    </select>

    <textarea id="Comments" rows="4" cols="5"></textarea>
</div>

---

问题：除单选按钮外，所有功能都被正确禁用

在幕后，插件脚本隐藏了实际的单选按钮和 将

span

像毯子一样盖在单选按钮上。此

span

具有 获得了一个具有不同状态（打开和关闭）的背景图像精灵 根据单选按钮选择相应更新。这就是 这个插件的工作

---

我本可以使用插件的内置方法来禁用/销毁功能，但我没有找到任何方法。

在DOM完成加载后，图像加载几乎没有延迟

因此，您可以尝试在

$（window.load（）

中调用函数

---

希望能有所帮助。

我提出的解决方案可以看作是一个补丁，但效果很好（至少在我的场景中）。正确的方法应该是使用一些现有的API方法来反映更改，比如

disable（）

或类似的方法，但我没有找到这样的方法或类似的方法

解决方案：使单选按钮显示为禁用（不可单击）

因为我不想深入研究插件

js

文件。为此，我制作了一个透明的

div

，具有一些

宽度和
高度，足以覆盖单选按钮，并将其放置在单选按钮和光标之间的一层上。默认情况下，此div是隐藏的，并在禁用控件时显示此div。保持简短，下面是代码更改

HTML
剧本
然而，这个解决方案需要消除人们对使用开发工具来智能化应用程序的恐惧，但这并不重要。此外，您不能100%阻止用户使用此类工具

另一个有效且看起来更合适的解决方案：将不可见的毯子放在输入控件上听起来像一块补丁，可以很容易地捕捉。插件脚本添加了一个名为
styled
的CSS类，需要添加以下样式以实现定制的外观

input.styled
{
    display: none;  // hides the parent input element
}

因此，即使我们将按钮状态切换为禁用，更改也不会反映出来，因为父元素被隐藏，使得其他侦听器难以附加。通过将样式更改为follow，一切正常

input.styled
{
    position: absolute;
    opacity: 0;
}

它使父输入元素不可见，但在后台DOM上完全处于活动状态。
禁用图像是什么意思？有关如何将图像嵌入单选按钮的示例代码会很有帮助。禁用图像，我的意思是，我使用span标记设置单选按钮的样式。它们的背景图像处于选中和未选中状态。表示单选按钮重叠的图像在单击时仍在更改。如果您通过CSS类使用任何类型的图像，那么您也必须更改该类（通过将其替换为其他类）。
#Blanket
{
  position:absolute;  /*Imp: otherwise it will disturb the UI*/
  width:100px;
  height:100px;
  display:none;
  /* top/left adjustments, if required! */
}

$(function(){
   $('#DisableElements').click(function(){
      $('#Blanket').show();
      $('#Main').find('*').attr('disabled', 'disabled');
   });
});

input.styled
{
    display: none;  // hides the parent input element
}

input.styled
{
    position: absolute;
    opacity: 0;
}