JS - Aktivieren/Deaktivieren Textfeld mit Checkbox

Grundsätzlich ist meine Aufgabe, JavaScript zu aktivieren, wenn das Kontrollkästchen aktiviert ist (aktivieren) und deaktivieren Sie es, wenn es angeklickt (aus). Der Code funktioniert jedoch immer noch nicht und wird nichts tun, unabhängig davon, ob ich auf das Kontrollkästchen klicke oder nicht.JS - Aktivieren/Deaktivieren Textfeld mit Checkbox

</head> 
<body> 
<div id="container"> 
<h2> Order Information </h2> 
<div class="entry"> 
    Select color: 
    <select name="color"> 
    <option selected="selected">White</option> 
    <option>Black</option> 
    <option>Red</option> 
    <option>Green</option> 
    <option>Blue</option> 
    </select> <br><br> 
    Select shirt size: 
    <select name="sizeandprice"> 
    <option>Small - $9.99</option> 
    <option>Medium - $10.99</option> 
    <option selected="selected">Large - $11.99</option> 
    <option>X-Large - $13.99</option> 
    </select><br><br> 
    Is this a gift? <input type="checkbox" name="gift"> <br><br> 
    Write your gift message here: <br> 
    <textarea disabled rows="5" cols="50" name="message">Type your message here. 
    </textarea> 
</div> 
</div> 

</body> 
</html>

Hier ist der Javascript-Code:

function enable(x) { 
    x = document.getElementbyId("gift"); 
    x.checked 
    if(x == true) { 
     var textarea = document.getElementbyId("message"); 
     textarea.disabled = false; 
    } 
    else { 
     var textarea = document.getElementbyId("message"); 
     textarea.disabled = true; 
    } 

}

Quelle

2017-11-05 Rookie

Das Problem ist, dass Ihre Funktion wird aufgerufen, nie zu werden. Sie müssen eine Ereignisrückruffunktion click binden, die enable aufruft. Sie müssen auch einige andere Code zwickt - siehe Kommentare inline:

// Get reference to checkbox and textarea just once, not over and over 
 
// Also, you were using .getElementById(), but your elements weren't 
 
// given id's, they have names 
 
var chk = document.querySelector("input[name=gift]"); // id is not "gift", name is 
 
var textarea = document.querySelector("textarea[name=message"); // id is not "message", name is 
 

 
// Set up click event handler: 
 
chk.addEventListener("click", enable); 
 

 
function enable() { 
 
    // Just base the disabled of the textarea on the opposite 
 
    // of the checkbox's checked state 
 
    textarea.disabled = !this.checked; 
 
}

<div id="container"> 
 
<h2> Order Information </h2> 
 
<div class="entry"> 
 
    Select color: 
 
    <select name="color"> 
 
    <option selected="selected">White</option> 
 
    <option>Black</option> 
 
    <option>Red</option> 
 
    <option>Green</option> 
 
    <option>Blue</option> 
 
    </select> <br><br> 
 
    Select shirt size: 
 
    <select name="sizeandprice"> 
 
    <option>Small - $9.99</option> 
 
    <option>Medium - $10.99</option> 
 
    <option selected="selected">Large - $11.99</option> 
 
    <option>X-Large - $13.99</option> 
 
    </select><br><br> 
 
    Is this a gift? <input type="checkbox" name="gift"> <br><br> 
 
    Write your gift message here: <br> 
 
    <textarea disabled rows="5" cols="50" name="message">Type your message here. 
 
    </textarea> 
 
</div> 
 
</div>

Quelle

2017-11-05 19:04:36

-1

Ihre Eingabe Typ Element ist für ein Element ein Attribut name="gift" und Sie suchen die id="gift" enthält gegeben worden. Sie können das Attribut von name in id ändern oder verwenden. Siehe Beispiel für die Nutzung in document.document.getElementsByName

Quelle

2017-11-05 19:11:20 internetflex

Wenn er 'name' loswird, sendet das Element seine Daten nicht mit dem Formular. Außerdem gibt '.getElementsByName()' eine "Live" -Knotenliste zurück, die begrenzte Anwendungsfälle hat, da sie mehr Ressourcen verwendet. '.querySelectorAll()' ist der richtige moderne Ansatz. –

document.getElementById('giftCheckbox').addEventListener('click', function(){ 
 
    var textArea = document.getElementById('messageTxtArea') 
 
    textArea.disabled = !textArea.disabled 
 
});

<body> 
 
<div id="container"> 
 
<h2> Order Information </h2> 
 
<div class="entry"> 
 
    Select color: 
 
    <select name="color"> 
 
    <option selected="selected">White</option> 
 
    <option>Black</option> 
 
    <option>Red</option> 
 
    <option>Green</option> 
 
    <option>Blue</option> 
 
    </select> <br><br> 
 
    Select shirt size: 
 
    <select name="sizeandprice"> 
 
    <option>Small - $9.99</option> 
 
    <option>Medium - $10.99</option> 
 
    <option selected="selected">Large - $11.99</option> 
 
    <option>X-Large - $13.99</option> 
 
    </select><br><br> 
 
    Is this a gift? <input type="checkbox" id="giftCheckbox" name="gift"> <br><br> 
 
    Write your gift message here: <br> 
 
    <textarea disabled rows="5" cols="50" id="messageTxtArea" name="message">Type your message here. 
 
    </textarea> 
 
</div> 
 
</div> 
 

 
</body>

habe ich ids zu Ihrem Kontrollkästchen und Textbereich. Ich verwende .addEventListener(), um einen Rückruf für das Checkbox-Klickereignis zu registrieren, das das Textarea-Element aktiviert/deaktiviert.

Quelle

2017-11-05 19:16:59

Bitte posten Sie keine Antworten auf Seiten von Drittanbietern, da diese Links im Laufe der Zeit absterben können. Fügen Sie einfach ein "Code-Snippet" in Ihre Antwort ein. –

JS - Aktivieren/Deaktivieren Textfeld mit Checkbox

Antwort

Verwandte Themen