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

时间:2012-06-19 08:27:22

标签: javascript jquery css

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

这些单选按钮位于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有   得到了一个具有不同状态(开和关)的背景图像精灵   相应的单选按钮选择更新。这就是   这个插件的工作。

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

2 个答案:

答案 0 :(得分:1)

在DOM加载完成后,图像加载的延迟很小,

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

希望它会有所帮助。

答案 1 :(得分:0)

我制作的解决方案可以被认为是一个补丁,但效果很好(至少对于我的场景)。应该采用的方法是使用一些现有的API方法来反映变化,例如disable()或类似的东西,但我没有找到这样的方法或类似的东西。

解决方案:使单选按钮显示为禁用(不可点击)。

因为我不想深入了解插件js文件。为此,我制作了一个透明的div,其中有一些widthheight足以覆盖单选按钮并将其放在它们上面,就像单选按钮和光标之间的层一样。默认情况下隐藏此div,并在禁用控件时显示此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 - 用于毯子d​​iv

#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上完全处于活动状态。