Как включить и отключить кнопку с помощью javascript?

Question

Я новичок в этом бизнесе, и я хотел бы задать вопросы сомнения JavaScript и PHP

Я хотел создать динамический магазин, где, нажав на View Details откроет Modal и В нем будет be another button label Выберите button. Щелчок по этому Выберите появляется кнопка alert("Do you want to choose this toy?"). Если принимаете Выберите и Подробнее отключен (оба названы «Избранные»).

И вы увидите новую кнопку под названием Отмена кнопку рядом с Посмотреть детали. Ну, до сих пор мне удалось сделать 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 Body:

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

To:

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>