answerElement.addEventListener("click", () => { // Evénement pour mettre une couleur si c'est juste ou faux CreateLabel.style.backgroundColor = "white"; // On set le style a blanc de base if (value[i].propositions[j] == value[i].réponse) { CreateLabel.style.backgroundColor = "green"; // On set le style a green quand c'est juste console.log(answerElement) answerElement.disabled = true; const anecdoteElement = document.createElement("p"); const anecdoteNode = document.createTextNode(value[i].anecdote); // Crée l'anecdote quand c'est juste anecdoteElement.appendChild(anecdoteNode); CreateLabel.appendChild(anecdoteElement); } else { CreateLabel.style.backgroundColor = "red"; // On set le style a green quand c'est juste answerElement.disabled = true; } })Hola, aquí está mi problema, quiero hacer clic en deshabilitar las otras 3 entradas, aquí mi entrada es answerElement, excepto que deshabilité la entrada al hacer clic, pero quiero deshabilitar las otras 4 al hacer clic y no puedo encontrarlo
for (let i = 0; i < value.length - 10; i++) { var score = 0; const QuestElement = document.createElement("h2"); // Ici on crée toute les question en fonction la taille de value, ici 30 - 10 (-10 pour pas que ce soit les mêmes questions) const QuestNode = document.createTextNode(value[i].question); // Ici on crée un textnode pour mettre les questions dans h2 QuestElement.appendChild(QuestNode); // Ici on le fait spawn answersDiv.appendChild(QuestElement); for (let j = 0; j <= 3; j++) { // Ici c'est pour crée les Propositions pour chaque questions const answerElement = document.createElement("input"); // On crée un input answerElement.id = "salut" + j; answerElement.value = j; answerElement.type = "radio"; // le Type = radio answerElement.name = "input"; answerElement.classList = "input"; const CreateLabel = document.createElement("label"); // On crée le label pour les inputs CreateLabel.classList = "Label"; CreateLabel.name = "input"; CreateLabel.setAttribute("for", "salut" + j); // Ici on le setUnAttribut const answerNode = document.createTextNode(value[i].propositions[j]); // On crée le TextNodeLo que probablemente quiera hacer es seleccionar todas las demás entradas de radio junto answerElement y deshabilitarlas todas:
document.querySelectorAll(`[name=${answerElement.name}]`).forEach( (otherAnswer)=> { otherAnswer.disabled = true; } );Envuelva <form> alrededor de todos los <input> s. Agregue el detector de eventos al <form> y haga que el controlador de eventos delegue el evento de clic para los <input> s. Envuelva cada conjunto de 4 <input> s en un <fieldset> y haga referencia a ellos desde el <input> en el que se hizo clic. También se ha agregado una función nameRadios() para que cada conjunto de 4 radios comparta un nombre único. Ver delegación de eventos .
Los detalles se comentan en el ejemplo a continuación.
// Reference the <form> const form = document.forms[0]; // Pass the event object const switchInput = event => { // This is the <form> const listener = event.currentTarget; // This is the element the user clicked const clicked = event.target; /* if the element the user clicked was an <input>... */ if (clicked.matches('input')) { // ...reference the <fieldset> clicked is in... let fSet = clicked.parentElement; // ...collect all of the <input>s in an array... let answers = [...fSet.querySelectorAll('input')]; //...disable all <input>... answers.forEach(input => input.disabled = true); //...then enable clicked clicked.disabled = false; } }; /* Have the <form> listen for any clicks */ form.onclick = switchInput; const nameRadios = () => { // Collect all radios into an array const allRadios = [...document.querySelectorAll(`[type='radio']`)]; // Each set of 4 radios get a unique name for (let i = 0; i < allRadios.length; i++) { let q = Math.floor(i / 4); allRadios[i].name = `rad${q}`; } }; nameRadios(); <form> <fieldset> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> </fieldset> <fieldset> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> </fieldset> <fieldset> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> <input type='radio'><br> </fieldset> </form>