0
290
Visualizaçõeshtml deshabilitar el cuadro de texto cuando se selecciona el botón de opción
Estoy tratando de escribir Javascript para deshabilitar el cuadro de texto si se selecciona el botón de opción. Tengo 4 opciones para el botón de opción y el cuadro de texto correspondiente. Incluso si estoy seleccionando el botón de radio 2, puedo escribir valores en el texto de radio 1 y enviarlos. Entonces, quiero agregar un método al hacer clic o al cambiar la opción de selección del botón de opción. Tengo debajo de la función Javascript pero no se llama en el evento. Estoy haciendo algo mal. ¿Por qué no se llama Javascript? Cualquier ayuda sería apreciada. Soy nuevo en Javascript. 
{% extends "layout.html" %} {% block body %} <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function EnableDisableTextBox() { alert("good") var chkYes = document.getElementById("search1"); alert("Today's date is " chkYes); var text1 = document.getElementById("text1"); alert('java script') text1.disabled = chkYes.checked ? false : true; if (!text1.disabled) { text1.focus(); } } </script> <form method="post"> <br><br><br> <input type="radio" onchange="EnableDisableTextBox()" align="center" name="search" id="search1" value="" > By Keyword <input type="text" id="text1" name="text1" for="search1"></input> <br> <input type="radio" align="center" name="search" id="search2" value="" id="search2" > In PostalCode <input type="text" name="text2" id="text2" for="search2"></input><br> <input type="radio" align="center" name="search" id="search3" value="" id="search3" >Within<input type="number" name="text3" id="text3" for="search3" step="1" max="150" min="0">miles of me</input><br> <input type="radio" align="center" name="search" id="search4" value="Search4" id="search4" >In My PostalCode<br><br><br> <button name="button" id="btn" onclick="window.location.href='/search/{{search}}'">Search</button> </form> </head> </html> {% endblock %}2 Respostas
Responde à pergunta0
Intenta cambiar
alert("Today's date is " chkYes);a
alert("Today's date is " ,chkYes);0
según su código, solo vincula el evento onchange en la primera radio. necesita llamar a la función en cada botón de radio. Además dentro de la función EnableDisableTextBox , solo se marca el primer botón de opción y solo se deshabilita el primer cuadro de texto.
He creado un violín para su referencia en javascript y jquery:
JAVASCRIPT
function EnableDisableTextBox(e) { var text1 = document.getElementById('text1'); var text2 = document.getElementById('text2'); var text3 = document.getElementById('text3'); var checkid = e.id; text1.disabled = true; text2.disabled = true; text3.disabled = true; if (checkid == 'search1') { text1.disabled = false; } else if (checkid == 'search2') { text2.disabled = false; } else if (checkid == 'search3') { text3.disabled = false; } }JQUERY
$(document).on('change', 'input[name="search"]', function() { var name = $(this).next().attr('id'); $('input[type="text"],input[type="number"]').each(function(i, e) { if (name == $(e).attr('id')) { $(e).removeAttr('readonly'); } else { $(e).val(''); $(e).attr('readonly', 'readonly'); } }) })