Quiero que si se selecciona test2 de <option> y luego deshabilite todas las entradas de elementos a través de id element1 . Intento con if pero no me funciona
function myFunction() { if (document.getElementById("element0").value = "test2") { document.getElementById("element1").disabled = true; } else { document.getElementById("element1").disabled = !0; } } <select name="" id="element0"> <option value="test1">test1</option> <option value="test2">test2</option> </select> <div id="element1"> <label for="your-name">Name: </label> <input type="text" name="your-name" id="" /> </div>En general, debería tener mejores nombres para sus campos y elementos. Element0 no describe con precisión qué es o qué hace. Elegí un nombre simple aquí, pero piense usted mismo en un nombre mejor.
La función en sí se puede simplificar. Puede asignar constantes para las referencias de elementos para poder reutilizar código. Es más legible así y no tiene que buscar dos veces el mismo elemento (con .getElementById).
El atributo disabled puede ser el resultado de la expresión, ya que se correlaciona.
function myFunction() { const dropdown = document.getElementById('dropdown'); const name = document.getElementById('name'); name.disabled = dropdown.value === 'test2'; } <meta name="color-scheme" content="dark light" /> <body onload="myFunction()" oninput="myFunction()" style="zoom: 225%"> <select name="dropdown" id="dropdown"> <option value="test1">test1</option> <option value="test2">test2</option> </select> <div> <label for="name">Name: </label> <input type="text" name="name" id="name" /> </div> </body>Primero, el operador de comparación debe ser "===", no "=". En segundo lugar, debe deshabilitar el elemento de entrada, no todo el div (obviamente, no puede hacerlo). Entonces, agregué la identificación en la entrada. En tercer lugar, !0 también significa verdadero, así que lo cambié a falso
function myFunction() { if (document.getElementById("element0").value === "test2") { document.getElementById("element1").disabled = true; } else { document.getElementById("element1").disabled = false; } } <select id="element0" onchange="myFunction()"> <option value="test1">test1</option> <option value="test2">test2</option> </select> <div> <label for="your-name">Name: </label> <input type="text" name="your-name" id="element1" /> </div>Así que tienes un par de problemas con tu código. Primero en su cláusula if está haciendo una asignación en lugar de una comparación: = es solo para asignaciones como: let i = 0 y == o === se usan para comparar, siendo este último el más usado porque no hace inferencia de tipo. A continuación, está deshabilitando un div y no una input . Así que aquí hay una descripción general rápida de mis cambios en su código:
<select name="myOption" id="element0"> <option value="test1">test1</option> <option value="test2">test2</option> </select> <div id="element1"> <label for="your-name">Name: </label> <input id="inputElement1" type="text" name="your-name" id="" /> </div> </body> function myFunction() { if (document.getElementById("element0").value === "test2" ) { document.getElementById("inputElement1").disabled=true; } else { document.getElementById("inputElement1").disabled=false; } } Editar: ¡También cambió de !0 a false en la cláusula else porque !0 es true y probablemente no sea lo que desea.