我使用`button.disabled = true;`不正确？

Question

我试图在播放影片剪辑的Animate CC中建立一个交互，并在按钮被点击后消失。

我试图在电影剪辑播放主背景时临时禁用其他按钮，但播放效果并不好。

单击处理程序的代码片段：

exportRoot.btn_cook.addEventListener("click", cook_clickHandler.bind(this)); 
function cook_clickHandler(){ 
    exportRoot.cook.gotoAndPlay(1); //play the info clip 
    exportRoot.btn_cook.visible = false; //hide button for no replays 
    disableAll(); 
} 

disableAll();确实在画布上的每个按钮如下：

if(exportRoot.btn_receive.visible == true){ 
    exportRoot.btn_receive.disabled = true; 
} 

我遇到了一些麻烦试图找出如何使用这适当。当我通过交互时，我仍然可以点击按钮，即使我想禁用它们？

此演示不会在GitHub上加载声音，但它在其他方面起作用。 Click here to see it.

Answer 1

我有同样的问题，所以我有另一种方式来做到这一点：

你可以尝试删除eventListener点击，像这样：

if(!exportRoot.btn_receive.hasEventListener("click")){ 
    exportRoot.btn_receive.removeEventListener("click", cook_clickHandler); 
} 

当u希望这是再次启用，请添加eventListener。

Answer 2

disabled属性是一个布尔属性。这意味着只要存在它就足以导致元素被禁用。这对您设置的值没有任何影响。您需要从元素中删除属性以删除禁用的效果。

删除事件侦听器会处理症状，但它并没有涉及到问题的核心。

另外（FYI），则visibility属性获取的"visible"或"hidden"，不true或false值。

下面是如何应用和禁用（没有双关语意）disabled属性的简单示例：

btnToggle.addEventListener("click", function(){ 
 

 
    var elems = document.querySelectorAll(".disableEnable"); 
 
    
 
    // Loop through each element in the class 
 
    elems.forEach(function(element){ 
 
    
 
    // Check to see if the first element has the disabled attribute 
 
    // the value of the attribute doesn't matter. If the attribute 
 
    // is present, the element is currently disabled. 
 
    if(element.getAttribute("disabled")){ 
 
     
 
     // Element is disabled, so enabled it by removing 
 
     // the attribute (not by setting a value) 
 
     element.removeAttribute("disabled"); 
 
    } else { 
 
     // Element is enabled, so disable it by adding the disabled 
 
     // attribute. Again, the value doesn't matter, but convention 
 
     // says that we set a value of "disabled" to convey that it is 
 
     // a boolean attribute. 
 
     element.setAttribute("disabled", "disabled"); 
 
    } 
 
          
 
    }); 
 
    
 
});

<button id="btnToggle">Disable/Enable</button> 
 

 
<button class="disableEnable">Test Button</button> 
 
<input class="disableEnable"> 
 
<input type="text" class="disableEnable">