Wie aktivieren und deaktivieren Sie eine Schaltfläche mit Javascript?

Question

Ich bin neu in diesem Geschäft, und ich möchte Fragen Zweifel an JavaScript stellen und PHP

Ich wünsche ein dynamisches Geschäft, in dem durch Klicken auf die Details erstellen den Modal öffnen und es wo gibt eine andere Schaltfläche mit der Bezeichnung Wählen Sie Schaltfläche. Klicken Sie hierzu auf Wählen Sie Schaltfläche erscheint eine alert("Do you want to choose this toy?"). Wenn Sie die akzeptieren Wählen Sie Schaltfläche und die Details anzeigen wird deaktiviert (beide mit dem Namen "gewählt").

Und Sie werden eine neue Schaltfläche Abbrechen Schaltfläche neben dem Details genannt sehen. Nun, bisher habe ich das JavaScript geschafft.

Mein Problem ist:

Ich mag diese JavaScript-Funktion „permanent“ sein (auch die Seite aktualisieren kann nicht JavaScript-Funktion „Deaktivieren“ geändert werden), sondern kann nur geändert werden, wenn der Benutzer die erlaubt, Funktion, klicken Sie auf die Abbrechen Schaltfläche.

Keine andere Person mit anderer Login kann die Funktion „disable“ (dh die-Taste, um diejenigen, die die Select Schaltfläche geklickt sichtbar ist, wird nur Abbrechen ) abbrechen.

Ich möchte auch in der folgenden Informationsdatenbank speichern: (wenn der Benutzer wählt das Produkt platziert auf einer Tabelle, seinen Namen und das Produkt wählte er). Folgen Sie dem unten stehenden Code mit funktionaler JavaScript-Funktion.

PHP:

Script:

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 Körper:

<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

Wechsel:

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

An:

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

Oder Sie können auch Ihre Taste wie folgt machen:

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

Versuchen Sie, die folgende Demo ohne Server-Seite Sprache. Es funktioniert auch nach der Seitenaktualisierung.

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>