0

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

这些单选按钮位于一个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有一个具有不同状态（打开和关闭）的背景图像精灵，它会在单选按钮选择时相应更新。这是这个插件的工作。

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

4

2 回答 2

1

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

所以你可以尝试在$(window).load().

希望它会有所帮助。

于 2013-01-21T06:28:22.583 回答
0

我制作的解决方案可以被认为是一个补丁，但效果很好（至少对于我的场景）。正确的方法应该是使用一些现有的 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 - 用于毯子 div

#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% 阻止用户使用此类工具。

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

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

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

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

它使父输入元素不可见，但在幕后在 DOM 上完全活跃。

于 2014-08-12T11:15:21.570 回答