已禁用的按鈕指示殘疾，但接受點擊

通過單擊禁用任何按鈕後，該按鈕看起來像禁用了按鈕，但接受更多的點擊。我注意到頁面中沒有<form>，但添加<form>似乎並不重要。已禁用的按鈕指示殘疾，但接受點擊

爲什麼？

function tally(card, suit) { 
 
    cards += card; 
 
    suits += suit; 
 
    alert("btn" + card + suit); 
 
    disableButton("btn" + card + suit) 
 
} 
 

 
function disableButton(button) { 
 
    document.getElementById(button).setAttribute("class", "button disabled"); 
 
    var x = document.getElementById(button).getAttribute("class"); 
 
    alert(x); 
 
} 
 

 
var suits = ""; 
 
var cards = "";

.button { 
 
    color: white; 
 
    font-size: 16px; 
 
    border-radius: 25px; 
 
} 
 

 
.disabled { 
 
    opacity: 0.6; 
 
    cursor: not-allowed; 
 
}

<div id="Spades" class="tabcontent"> 
 
    <h3>&spades;</h3> 
 
    <div class="btn-group"> 
 
    <button id="btnAS" class="button" onclick='tally("A","S")'>A</button> 
 
    <button id="btnKS" class="button" onclick='tally("K","S")'>K</button> 
 
    <button id="btnQS" class="button" onclick='tally("Q","S")'>Q</button> 
 
    <button id="btnJS" class="button" onclick='tally("J","S")'>J</button> 
 
    </div> 
 
</div>

來源

2017-02-15 zerowords

爲什麼呢？因爲你只是 - 在你的代碼中無處設置被點擊的按鈕具有'disabled' **屬性**。 –

是的，我在函數'disableButton（）'中做過。實際上，如果你從課堂上刪除「按鈕」，你會得到相同的結果。 – zerowords

不，你有沒有:)有一個**光標風格**'不允許'和一個實際**禁用**按鈕的巨大差異。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button或一個快速的Goog：「html js如何禁用按鈕」會導致您找到合適的解決方案。 –

簡單地說，通過this參考，並都在JS和CSS使用disabled屬性。

var cards = "", 
 
    suits = ""; 
 

 
function tally(that, card, suit) { 
 
    cards += card; 
 
    suits += suit; 
 
    that.disabled = true;        // Tyadaaaa ♪ 
 
    console.log("CARDS: "+ cards, "SUITS: "+ suits); 
 
}

button:disabled {    /* // Tyadaaaa ♪ */ 
 
    opacity: 0.6; 
 
    cursor: not-allowed; 
 
}

<div id="Spades" class="tabcontent"> 
 
    <h3>&spades;</h3> 
 
    <div class="btn-group"> 
 
    <button onclick='tally(this, "A","S")'>A</button> 
 
    <button onclick='tally(this, "K","S")'>K</button> 
 
    <button onclick='tally(this, "Q","S")'>Q</button> 
 
    <button onclick='tally(this, "J","S")'>J</button> 
 
    </div> 
 
</div>

來源

2017-02-15 23:11:09

-1

添加pointer-events: none;您.disabled CSS

來源

2017-02-15 22:52:06 larz

請注意，IE 8不支持'pointer-events' http://caniuse.com/#search=pointer-events – bejado

幸運的是IE8佔有1％的市場份額（可能是North Corea ......）@bejado –

試試這個：

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

希望這有助於

來源

2017-02-15 22:52:17

你不想把它設置爲「true」嗎？ – bejado

@bejado是的。感謝您指出，我會編輯我的答案。 –

'document.getElementById（「Button」）'？爲什麼不簡單地「這個」？ –

您需要設置disab導致屬性設置爲true

 function disableButton(button) { 
    document.getElementById(button).setAttribute("class", "button disabled"); 
    var x = document.getElementById(button).getAttribute("class"); 
    alert(x); 
    document.getElementById(button).disabled = true; 
    }

來源

2017-02-15 22:58:16 Gregg

是的，這似乎工作，主要是。但在我的*真實*頁面上，它似乎阻止了小鬼的工具提示，所以我也需要恢復。我希望我有時間。 – zerowords

-1

function tally(btn, card, suit) { 
 
     if(btn.disabled){ 
 
     console.log(btn); 
 
     btn.preventDefault(); 
 
     return; 
 
     } 
 
     cards += card; 
 
     suits += suit; 
 
     alert("btn" + card + suit); 
 
     disableButton("btn" + card + suit) 
 
    } 
 

 
    function disableButton(button) { 
 
     document.getElementById(button).setAttribute("class", "button disabled"); 
 
     var x = document.getElementById(button).getAttribute("class"); 
 
     alert(x); 
 
    } 
 

 
    var suits = ""; 
 
    var cards = "";

<!-- begin snippet: js hide: false console: true babel: false -->

我加在HTML中的onClick函數調用按鈕參考。而在JavaScript中，您可以利用該引用並檢查按鈕是否將disabled屬性設置爲true。

function tally(btn, card, suit) { 
 
    if(btn.disabled) 
 
    return; 
 
    cards += card; 
 
    suits += suit; 
 
    alert("btn" + card + suit); 
 
    disableButton("btn" + card + suit) 
 
} 
 

 
function disableButton(button) { 
 
    document.getElementById(button).setAttribute("class", "button disabled"); 
 
    document.getElementById(button).setAttribute("disabled", "true"); 
 
    var x = document.getElementById(button).getAttribute("class"); 
 
    alert(x); 
 
} 
 

 
var suits = ""; 
 
var cards = "";

/* Styles go here */ 
 

 
.button { 
 
    color: white; 
 
    font-size: 16px; 
 
    border-radius: 25px; 
 
} 
 

 
.disabled { 
 
    opacity: 0.6; 
 
    cursor: not-allowed; 
 
}

<div id="Spades" class="tabcontent"> 
 
    <h3>&spades;</h3> 
 
    <div class="btn-group"> 
 
     <button id="btnAS" class="button" onclick='tally(this, "A","S")'>A</button> 
 
     <button id="btnKS" class="button" onclick='tally(this, "K","S")'>K</button> 
 
     <button id="btnQS" class="button" onclick='tally(this, "Q","S")'>Q</button> 
 
     <button id="btnJS" class="button" onclick='tally(this, "J","S")'>J</button> 
 
    </div> 
 
    </div>

來源

2017-02-15 23:01:59 inoabrian

你的想法很有希望，但它並沒有改變結果：我仍然可以一次又一次地點擊按鈕，每次得到一個響應， – zerowords

我忘了試試preventDefault – inoabrian

我通過添加以下內容來修復它： document.getElementById （button）.setAttribute（「disabled」，「true」）; – inoabrian

已禁用的按鈕指示殘疾，但接受點擊

回答

相關問題