Comment désactiver une zone de texte lorsque vous cliquez sur d'autres boutons radio en utilisant une seule fonction en javaScript? - javascript, html

Je veux désactiver la zone de texte (son identifiant est text1), lorsque vous cliquez sur d'autres boutons radio utilisant une seule fonction. Selon mon code, la zone de texte est affichée lorsque l'utilisateur clique sur le bouton radio (son identifiant est rd_other). Mais lorsque l'utilisateur clique sur les autres boutons radio, après avoir cliqué sur le bouton radio ci-dessus (son identifiant est rd_other) la zone de texte ne désactive pas.

Voici HTML mon code.

<input type="radio" name="rd_other" id="rd_other" value="rd_other" data-toggle="radio" onchange="enableText()">Other (please specify)

<input type="text" name="text1" id="text1"class="form-control input-sm jfl" readonly="readonly" style="display: none;"/>

<input type="radio" name="rdn1" id="rdn1" value="rdn1" data-toggle="radio">I haven"t received the disc

<input type="radio" name="rdn2" id="rdn2" value="rdn2" data-toggle="radio">I lost or damaged the protective cover

Voici mon code javaScript.

function enableText() {
var text1 = document.getElementById("text1");
text1.readOnly = false;
text1.style.display = "block";
}

Réponses:

Tout d'abord, pour éviter toute confusion, onchange ne se déclenche que lorsqu'un bouton d'option est sélectionné.

Deuxièmement, vous devez relier une fonction onchange aux deux autres boutons radio. La fonction ci-dessous devrait fonctionner.

function disableText() {
var text1 = document.getElementById("text1");
text1.readOnly = true;
text1.style.display = "none";
}

comme ça

function disable() {
//one radio button
var radio = document.getElementById("your_radio_button_id");
var checkbox = document.getElementById("your_checkbox_id");
if (radio.checked == true) {
checkbox.disabled = true;
}
}

ou comme ça

function disable() {

var radios = document.getElementsByName("your_radio_button_group_name");
var checkbox = document.getElementById("your_checkbox_id");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
checkbox.disabled = true;
}
}
}

Vous pouvez corriger ceci comme ceci:

window.enableText = function(e) {
var text1 = document.getElementById("text1");
if(e.id == "rd_other2") {
text1.readOnly = false;
text1.style.display = "block";
}
else{
text1.readOnly = true;
text1.style.display = "none";
}
}

s'il vous plaît vérifier l'exemple complet ici :)