如何啓用和禁用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>