Question

点击它后禁用任何按钮后，该按钮看起来已被禁用但接受更多点击。我注意到页面中没有<form>，但添加<form>似乎并不重要。

为什么？

＆＃13;

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 = "";

＆＃13;

.button {
  color: white;
  font-size: 16px;
  border-radius: 25px;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

＆＃13;

<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>

＆＃13;

Answer 1

简单地说，传递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>

Answer 2

试试这个：

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

希望这会有所帮助

Answer 3

您需要将disabled属性设置为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;
  }

Answer 4

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

Answer 5

mysql> GRANT ALL ON uesrName.* TO username@'hostname.mysql.pythonanywhere-services.com';
Query OK, 0 rows affected (0.00 sec)

    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 = "";

我在html中的onClick函数调用中添加了按钮引用。在JavaScript中，您可以利用该引用并检查按钮是否将disabled属性设置为true。

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

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;
}

禁用按钮表示残疾，但接受点击

5 个答案: