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

Question

我是这个行业的新手，想询问有关 JavaScript 和 PHP 的疑问

我想创建一个动态商店，通过单击查看详细信息将打开模态框，其中将有另一个标记为选择按钮的按钮。单击此选择按钮会出现一个警报(“您想选择这个玩具吗？”)。如果接受选择按钮，则查看详细信息将被禁用(均名为“选择”)。

您将在查看详细信息旁边看到一个名为取消按钮的新按钮。好吧，到目前为止我已经成功地完成了 JavaScript。

我的问题是:

我希望这个 JavaScript 函数是“永久”的(即使刷新页面也无法更改 JavaScript 函数“禁用”)，但只能在用户禁用该函数时才能更改，点击取消 按钮。

使用不同登录名的其他人不得取消“禁用”功能(即，取消按钮仅对单击选择按钮的人可见)。

我还想存储在以下信息数据库中:(当用户选择放置在 table 上的产品时，他的名字和他选择的产品)。请使用函数式 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>