禁用<li>按钮

Question

好的，如果我在一个列表中有六个按钮，在 li 标签下(每个按钮都rel数组的一部分(，我如何在按钮做它的时候禁用它的事情？(在本例中为播放视频(

我知道这有点模糊(我没有提供代码或类似的东西(，但那是因为我不知道该怎么做。如果我至少能指出正确的方向，那将是有帮助的，所以即使我无法弄清楚，至少我可以具体说明我的问题......谢谢。。。 编辑这是我现在所做的

<li rel='1' id="first">
    <div style="top:0px;">
      <img src="graphics/filler.png" alt="" width="280" height="128" onClick="asess"/>    
    </div>
</li>

然后添加了相应的功能

function asess() {
    document.getElementById("first").disabled = true;
}

我暂时还不关心重新添加函数，因为首先我想让这部分工作。

编辑我有这个，应该可以工作，但我想它不是在"说话"按钮吗？

$("li, .thumbs").bind("touchstart click", function() {
var $this = $(this);
if (!document.getElementById("first").disabled) {
            document.getElementById("first").disabled = true }
            else {document.getElementById("first").disabled = false};
        });

我知道它只会与带有该 id(第一个(的按钮对话，但只要我能让它为一个工作，我就可以完成其余的工作。那么，我做错了什么？

Answer 1

每个按钮都有一个 onclick 事件处理程序。为了防止 onclick 处理程序执行任何操作，附加到处理程序的 JavaScript 方法应返回 false 。如果你使用 jQuery 执行此操作return false;与调用 e.preventDefault(或 IE 的 event.preventDefault(相同。

当普通事件处理程序启动与按钮关联的操作时，它应添加禁用 onclick 操作的事件处理程序。

您可能还需要对按钮应用新的 CSS 样式，以便用户知道它已禁用。

操作完成后，您需要删除禁用 onclick 操作的事件处理程序，然后再次使用普通操作。

您始终可以使用标志来表示操作正在进行中，并通过操作打开和关闭它。如果标志为 on，则事件处理程序方法返回 false。

通过使用事件处理程序，您还可以在用户尝试单击按钮时向用户显示警报，然后再返回 false。

编辑：

这是您需要的JavaScript类型，第一次单击启动该过程，该过程将在五秒钟后使用setTimeout('stopAction()', 5000);自行停止。如果在此期间再次单击该项目，则会收到等待消息。

我建议你考虑使用jQuery来开发一个强大的跨浏览器解决方案。

var inProgress = false;
function asess() {
    if(inProgress) {
      alert('Please wait ...');
      return false;
    } else {
      startAction();
    }
}
function startAction() {
    inProgress = true;
    alert('Starting');
    document.getElementById("first").style.backgroundColor  = '#333333';
    setTimeout('stopAction()', 5000);
}
function stopAction() {
    inProgress = false;
    alert('Stopping');
    document.getElementById("first").style.backgroundColor  = '#FFFFFF';
}

Answer 2

document.getElementById("my_button").disabled = true;

当你完成时。

document.getElementById("my_button").disabled = false;

Answer 3

您可以在单击处理程序中"禁用"该元素，并在成功执行回调时重新启用它。

不能保证与具有disabled="disabled"属性的元素的单击处理程序绑定在浏览器中一致地实现(即事件可以/仍将触发(，并且不允许在表单元素上除外。我只是添加class="disabled"它给了我额外的权力来设置禁用元素状态的样式，比如说，将其灰化。

哦，还有jQuery。当然，这个逻辑可以在"普通"的javascript中重现，但随着库的使用而更加整洁，小提琴：

$('#my-button').click(function() {
    var $this = $(this); //cache the reference
    if (!$this.hasClass('disabled')) {
        $this.addClass('disabled');
        alert('hello world!');
        setTimeout(function($btn) {
            $btn.removeClass('disabled');
        }, 5000, $this);
    } else {
        return false;
    }
});