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

时间:2016-04-03 04:29:38

标签: javascript php mysql html5 session

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

我想创建一个动态商店,通过单击查看详细信息将打开模态,并在其中将有另一个标记为选择按钮的按钮。单击此选择按钮将显示alert("Do you want to choose this toy?")。如果接受选择按钮,查看详细信息将被禁用(两者都命名为"选择")。

您将在查看详细信息旁边看到一个名为取消按钮的新按钮。好吧,到目前为止我管理了JavaScript。

我的问题是:

我希望这个JavaScript函数成为永久性的#34; (即使刷新页面也无法更改JavaScript功能"禁用"),但只有在用户禁用了该功能后才能更改,单击取消按钮。

没有其他具有不同登录信息的人可以取消该功能"禁用" (即取消按钮仅对点击选择按钮的人可见。

我还想存储在以下信息数据库中:(当用户选择放置在桌子上的产品,他的名字和他选择的产品时)。使用功能JavaScript函数遵循以下代码。

PHP:

My PHP Code

脚本:

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

1 个答案:

答案 0 :(得分:0)

更改:

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

要:

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

或者您也可以按下这样的按钮:

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

尝试使用没有服务器端语言的以下演示。它甚至可以在页面刷新后工作。

&#13;
&#13;
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
  }
}
&#13;
<!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>
&#13;
&#13;
&#13;