为什么自定义单选按钮未被禁用

Why customized radio buttons are not getting disabled?

本文关键字：自定义 单选按钮 为什么      更新时间：2023-09-26

我正在使用此插件自定义页面上的复选框和单选按钮。

这些单选按钮位于 div#Main 元素中，该元素也包含一些其他 HTML 元素。我需要在单击按钮时禁用此div中的所有内容（我正在使用jQuery）。为此，我有以下代码，

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

脚本

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

问题：除单选按钮外，所有内容均已正确禁用。

在幕后，插件脚本隐藏了实际的单选按钮和 像毯子一样在单选按钮上放一个span。这个span有 有一个具有不同状态（打开和关闭）的背景图像精灵 在单选按钮选择上相应地更新。这是 此插件的工作。

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

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

因此，您可以尝试在 $(window).load() 中调用您的函数。

希望会有所帮助。

我所做的解决方案可以被认为是一个补丁，但效果很好（至少对于我的场景）。应该正确的方法是使用一些现有的 API 方法来反映更改，例如 disable() 或类似的东西，但我没有找到这样的方法或类似的东西。

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

因为我不想深入研究插件js文件。为此，我制作了一个透明的div，有一些width和height足以覆盖单选按钮并将其放在它们上面，就像单选按钮和光标之间的一层一样。默认情况下，此div 处于隐藏状态，并在禁用控件时显示此内容。保持简短和甜蜜，这里是代码更改。

.HTML

<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
  <div id="Blanket"></div>
  <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>

CSS - for blanketdiv

#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');
   });
});

然而，这个解决方案需要消除对有人使用开发人员工具来智能应用程序的担忧，但这并不重要。此外，您不能100%阻止用户使用此类工具。

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

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

因此，即使我们将按钮状态切换为禁用，更改也不会反映，因为父元素是隐藏的，这使得其他侦听器难以附加。通过将样式更改为以下，一切都起作用了。

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

它使父输入元素不可见，但在幕后的 DOM 上完全处于活动状态。

相关文章：