如何启用和禁用JavaScript按钮？

Question

我在这个行业是新的，我想问一下关于JavaScript和PHP

我想在那里通过点击查看详情将打开模态，并在它会有创建一个动态的店问题的疑虑被另一个按钮标记为选择按钮。点击这里选择按钮出现alert("Do you want to choose this toy?")。如果接受选择按钮和查看详细信息将被禁用（均命名为“Chosen”）。

而且您会看到一个新按钮取消按钮旁边的查看详情。那么，到目前为止，我管理的是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 \t \t \t \t \t \t 
 
    } 
 
} 
 

 
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>