如何使用 javascript 启用和禁用按钮？

Question

我是这个行业的新手，我想问一些关于 JavaScript 和 PHP 的问题

我想创建一个动态商店，通过单击 View Details 将打开 Modal，其中将有另一个标记为 Choose 按钮的按钮。单击此 Choose 按钮会出现 alert("Do you want to choose this toy?")。如果接受 Choose 按钮，View Details 将被禁用（均名为“Chosen”）。

您会在View Details 旁边看到一个名为Cancel 的新按钮。好吧，到目前为止，我已经完成了 JavaScript。

我的问题是：

我希望这个 JavaScript 功能是“永久的”（即使刷新页面也不能更改 JavaScript 功能“禁用”），但只有在用户禁用该功能后才能更改，点击 取消 按钮。

其他登录方式不同的人不得取消“禁用”功能（即，取消按钮仅对单击选择按钮的人可见）。

我还想在以下信息数据库中存储：（当用户选择放置在桌子上的产品时，他的名字和他选择的产品）。按照下面的代码使用功能性 JavaScript 函数。

PHP：

脚本：

function Chosen() {
  if (confirm('Deseja escolher este brinquedo?')) {} else {
    exit;
  }

  document.getElementById('botaoE').value = 'Chosen';
  document.getElementById('botaoE').disabled = 'disabled';

  document.getElementById('botaoV').value = 'Chosen';
  document.getElementById('botaoV').disabled = 'disabled';

  document.getElementById('botaoC').style = 'display';
}

function Cancel() {
  if (confirm('Deseja cancelar este brinquedo?')) {} else {
    exit;
  }

  document.getElementById('botaoV').value = 'View Details';
  document.getElementById('botaoV').removeAttribute('disabled');
  document.getElementById('botaoC').style = 'display:none';
}

HTML 正文：

<div align="center">
  <div align="center">

    <table>
      <tr>
        <td>
          <img class="img-blocos img-responsive" src="img/brinquedo/carros.jpg" />
        </td>
      </tr>

    </table>
    <div align="center">
      <!--Botão VER DETALHES-->
      <input type="button" id="botaoV" class="btn btn-primary" data-toggle="modal" data-target="#myModalCZ" value="View Details" />
      <!--Botão CANCELAR-->
      <input style="display:none;" type="button" class="btn btn-danger" id="botaoC" value="Cancel" onclick="Cancel();" />
    </div>

    <!--Modal-inicio-->
    <div id="myModalCZ" class="modal fade" role="dialog">
      <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 style="text-align:center;" class="modal-title">MCQUEEN</h4>
          </div>
          <div class="modal-body">
            <div align="center">Car 25cm.
              <br/>
              <img class="img-responsive" src="img/brinquedo/carros.jpg" width="300px" height="300px" />
              <br/>
              <br/>
              <!--Botão ESCOLHER-->
              <input type="button" class="btn btn-success" id="botaoE" value="Choose" onclick="Chosen();" />
              <br/>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">Exit</button>
          </div>
        </div>

      </div>
    </div>
    <!--Modal-Fim-->

Answer 1

改变：

document.getElementById('botaoV').disabled = 'disabled'

收件人：

document.getElementById('botaoV').disabled = true

或者你也可以像这样制作你的按钮：

onclick="Chosen(); this.disabled=true"

在没有服务器端语言的情况下尝试以下演示。即使在页面刷新后也能正常工作。

function setCookie(cname, cvalue) {
  document.cookie = cname + "=" + cvalue; //We set our custom cookies here
}

function readCookie() {
  var ca = document.cookie.split(';'); //Cookies values separated by ; so we split them.
  for (var i = 0; i < ca.length; i++) { //There can be more than one cookies
    var c = ca[i];
    if (c == 'status=disabled') { //if one of the cookies value match 'disabled'
      document.getElementById('botaoE').disabled = true; //We get botaoE and add disabled attribute
      document.getElementById('botaoC').style = 'display';
    } else {
      return ""; //If disabled is not found in our cookies, we return blank
    }
  }
}

function Chosen() {
  if (confirm('Confirm Chosen')) { //If you click on confirm prompt
    document.getElementById('botaoE').disabled = true; //id=botaoE will now have disabled attribute
    setCookie("status", 'disabled'); //We store the disable attribute in our cookie
    document.getElementById('botaoC').style = 'display'; // We show element with an id of botaoC
  } else {
    readCookie(); //If you click cancel on confirm prompt, we check the status of our cookie						
  }
}

function canCel() {
  if (confirm('Confirm Cancel?')) { //if you click OK on this confirm prompt
    var enabled = document.getElementById('botaoE').removeAttribute('disabled'); //We remove disabled attribute from an element with an id of botaoE
    document.getElementById('botaoC').style = 'none'; // And we hide an element with an id of botaoC
    setCookie("status", "");
  } else {
    return false; //Otherwise we return false, that means we don't do anything
  }
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Removing and enabling disabled attribute</title>
</head>

<body onload="readCookie();">
  <input type="button" class="btn btn-success" id="botaoE" value="Choose" onclick="Chosen();">
  <input style="display:none;" type="button" class="btn btn-danger" id="botaoC" value="Cancel" onclick="canCel();">
</body>

</html>