Tengo que decidir entre una situación que involucre Unicast y Multicast.
Cuando habilito la casilla de verificación, debo asegurarme de que el tipo de transmisión que he seleccionado sea Unidifusión o Multidifusión.
si se utiliza Multicast, la casilla de verificación debe dejarse en blanco con una cadena vacía.
si se está utilizando Unicast, el cuadro de texto actual debe ser de solo lectura y debe estar atenuado.
toggler = document.getElementsByName("currentEntry.enableCB"); var srcIp = document.getElementById("sourceIp"); var input_stream_type = document.getElementsByName("currentEntry.streamType")[0]; if(toggler[0].checked ){ if(input_stream_type.value === 'Multicast'){ srcIp.style.display = ''; //It shows the textbox with empty string so that we can fill in the data - Expected and working fine } else { //srcIp1.readOnly = true; //srcIp1.setAttribute("readOnly","true"); srcip1.setAttribute('readOnly','readOnly'); //The text box should be read-only in this case and should be greyed out, yet all three options hide the textbox. } } else { srcip1.style.display = 'none'; //It hides the text box - expected and working fine }¿Alguien podría arrojar algunas luces sobre cómo mostrar el cuadro de texto en modo de solo lectura con el modo atenuado cuando se selecciona la opción Unicast?
Los botones HTML, las entradas y las áreas de texto tienen un atributo que les permite ser de solo lectura, pero la palabra utilizada para ello es " desactivado ". Si tiene una etiqueta <input/> que tiene el atributo "deshabilitado" así: <input disabled />, entonces el resultado es el modo de solo lectura atenuado deseado. He incluido un ejemplo a continuación que utiliza los métodos " setAttribute() " y "removeAttribute() " de un elemento a continuación para agregar el atributo "deshabilitado" a una casilla de verificación, una entrada y un área de texto (el atributo deshabilitado no necesita ser establecido en "verdadero", pero puede ser útil para el ejemplo). Para obtener más información sobre estos métodos y el atributo "deshabilitado", haga clic en cualquiera de los hipervínculos del párrafo para visitar las referencias de W3Schools. ¡Ojalá esta información te sea útil!
function toggleReadWrite(element) { if(element.getAttribute('disabled') != null) { element.removeAttribute('disabled'); } else { // Setting the element's "checked" attribute to false only applies to checkbox inputs. This is optional. element.checked = false; element.setAttribute('disabled', true); } } <!DOCTYPE html> <html> <head> </head> <body> <button onclick="toggleReadWrite(document.getElementById('my-checkbox'));">Toggle Me!</button> <input type='checkbox' id='my-checkbox'/><label for='my-checkbox'>Check Me!</label> <br> <button onclick="toggleReadWrite(document.getElementById('my-input'));">Toggle Me!</button> <input id='my-input'/> <br> <button onclick="toggleReadWrite(document.getElementById('my-textarea'));">Toggle Me!</button> <textarea id='my-textarea'></textarea> </body> </html>Creé un violín que se acerca a sus requisitos con unidifusión y multidifusión y estoy usando el atributo hidden .
function toggle() { let mode = document.querySelector("[name=stream-type]:checked").value; let interesting = document.getElementById("interesting"); let interestingText = document.getElementById("interesting-text"); let operation = ((mode === 'unicast') ? 'set' : 'remove') + 'Attribute'; if (mode === 'multicast') { interesting.checked = false; interestingText.value = ""; } interesting[operation]("disabled", "disabled"); interestingText[operation]("disabled", "disabled"); } <!-- I have to decide between a situation involving Unicast and Multicast. When I enable the check box, I need to make sure the stream type I've selected is Unicast or Multicast. if Multicast is being used, the checkbox should be left blank with empty String. if Unicast is being Used ,the current textbox should be made read-only and should be greyed out. --> <input type="button" value="toggle" onclick="toggle()"> <label> InterestingCheckbox <input id="interesting" type="checkbox"> </label> Stream Type <label> Unicast<input name="stream-type" type="radio" value="unicast" checked> </label> <label> Multicast<input name="stream-type" type="radio" value="multicast"> </label> <br> <textarea id="interesting-text"></textarea>