html - enabled - ¿Por qué los botones de radio no pueden ser "de solo lectura"?
jquery check if radio is disabled (13)
Me gustaría mostrar un botón de opción, que se envíe su valor, pero, según las circunstancias, no se puede editar. Disabled no funciona, porque no envía el valor (¿o no?), Y pone gris el botón de opción. Solo lectura es realmente lo que estoy buscando, pero por alguna razón misteriosa no funciona.
¿Hay algún truco extraño que deba extraer para que solo se lea y funcione como se espera? ¿Debo hacerlo en JavaScript?
Por cierto, ¿alguien sabe por qué la opción de solo lectura no funciona en los botones de opción, mientras funciona en otras etiquetas de entrada? ¿Es esta una de esas omisiones incomprensibles en las especificaciones de HTML?
¿Qué tal si capturamos un evento "On_click ()" en JS y lo comprobamos aquí ?:
Encontré que use onclick=''this.checked = false;''
trabajado hasta cierto punto. No se seleccionará un botón de opción en el que se hizo clic. Sin embargo, si había un botón de opción que ya estaba seleccionado (por ejemplo, un valor predeterminado), ese botón de opción se deseleccionaría.
<!-- didn''t completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick=''this.checked = false;''>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick=''this.checked = false;''>Y</input>
Para este escenario, dejar el valor predeterminado solo y deshabilitar el otro botón (s) de radio conserva el botón de opción ya seleccionado y evita que no se seleccione.
<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>
Esta solución no es la forma más elegante de evitar que se modifique el valor predeterminado, pero funcionará independientemente de que javascript esté habilitado o no.
Este es el truco con el que puedes ir.
<input type="radio" name="name" onclick="this.checked = false;" />
Forma JavaScript - esto funcionó para mí.
<script>
$(document).ready(function() {
$(''#YourTableId'').find(''*'').each(function () { $(this).attr("disabled", true); });
});
</script>
Razón:
$(''#YourTableId'').find(''*'')
-> esto devuelve todas las etiquetas.$(''#YourTableId'').find(''*'').each(function () { $(this).attr("disabled", true); });
itera sobre todos los objetos capturados en esto y deshabilita las etiquetas de entrada.
Análisis (depuración):
form:radiobutton
se considera internamente como una etiqueta de "entrada".Como en la función anterior (), si intenta imprimir
document.write(this.tagName);
Donde sea, en las etiquetas encuentra botones de opción, devuelve una etiqueta de entrada.
Por lo tanto, la línea de código anterior se puede optimizar para las etiquetas de botón de radio, reemplazando * con la entrada: $(''#YourTableId'').find(''input'').each(function () { $(this).attr("disabled", true); });
He encontrado una forma pesada de javascript para lograr un estado de solo lectura para casillas de verificación y botones de opción. Se prueba con las versiones actuales de Firefox, Opera, Safari, Google Chrome, así como versiones actuales y anteriores de IE (hasta IE7).
¿Por qué no simplemente usar la propiedad deshabilitada que pides? Al imprimir la página, los elementos de entrada deshabilitados salen en un color gris. El cliente para el que se implementó quería que todos los elementos salieran del mismo color.
No estoy seguro de si puedo publicar el código fuente aquí, ya que desarrollé esto mientras trabajaba para una empresa, pero seguramente puedo compartir los conceptos.
Con eventos onmousedown, puede leer el estado de selección antes de que la acción de clic lo modifique. Entonces, almacena esta información y luego restaura estos estados con un evento onclick.
<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>
<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>
La parte javascript de esto funcionaría así (nuevamente solo los conceptos):
var selectionStore = new Object(); // keep the currently selected items'' ids in a store
function storeSelectedRadiosForThisGroup(elementName) {
// get all the elements for this group
var radioOrSelectGroup = document.getElementsByName(elementName);
// iterate over the group to find the selected values and store the selected ids in the selectionStore
// ((radioOrSelectGroup[i].checked == true) tells you that)
// remember checkbox groups can have multiple checked items, so you you might need an array for the ids
...
}
function setSelectedStateForEachElementOfThisGroup(elementName) {
// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
...
// make sure you return false here
return false;
}
Ahora puede habilitar / deshabilitar los botones de radio / casillas de verificación al cambiar las propiedades onclick y onmousedown de los elementos de entrada.
He falsificado solo un botón de opción al desactivar solo los botones de opción sin marcar. Evita que el usuario seleccione un valor diferente, y el valor verificado siempre se publicará en el envío.
Usando jQuery para hacer de solo lectura:
$('':radio:not(:checked)'').attr(''disabled'', true);
Este enfoque también funcionó para hacer una lista de selección de solo lectura, excepto que deberá deshabilitar cada opción no seleccionada.
La mejor solución para establecer el estado marcado o no comprobado (ya sea desde el cliente o el servidor) y no permitir que el usuario lo cambie después de las protecciones (es decir, hacerlo de solo lectura) haga lo siguiente:
<input type="radio" name="name" onclick="javascript: return false;" />
Los botones de opción solo necesitarán ser de solo lectura si hay otras opciones. Si no tiene otras opciones, no se puede desmarcar un botón de opción marcado. Si tiene otras opciones, puede evitar que el usuario cambie el valor simplemente deshabilitando las otras opciones:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
Fiddle: http://jsfiddle.net/qqVGu/
Para los botones de opción no seleccionados, márquelos como deshabilitados. Esto les impide responder a la entrada del usuario y borrar el botón de opción marcado. Por ejemplo:
<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
Pruebe el atributo disabled
, pero creo que no obtendrá el valor de los botones de opción. O configura imágenes en su lugar como:
<img src="itischecked.gif" alt="[x]" />radio button option
Atentamente.
Tengo un formulario extenso (más de 250 campos) que se publica en un db. Es una aplicación de empleo en línea. Cuando un administrador va a ver una aplicación que se ha archivado, el formulario se completa con datos de la base de datos. Los textos de entrada y las áreas de texto se reemplazan por el texto que envían, pero las radios y casillas de verificación son útiles para mantener como elementos de formulario. Deshabilitarlos los hace más difíciles de leer. Establecer la propiedad .checked para hacer clic en falso no funcionará porque es posible que el usuario haya verificado la aplicación. De todos modos...
onclick="return false;"
funciona como un amuleto para ''deshabilitar'' radios y casillas de verificación ipso facto.
Una opción bastante simple sería crear una función de javascript llamada en el evento "onsubmit" del formulario para habilitar el botón de radio hacia atrás para que su valor se publique con el resto del formulario.
No parece ser una omisión en las especificaciones de HTML, pero una opción de diseño (una lógica, en mi humilde opinión), un botón de radio no puede ser de solo lectura como no puede ser un botón, si no desea usarlo, entonces deshabilitarlo
en init:
pscript = "try{if($(this).attr(''readonly'')){return false;};}catch(err){};"
Me.Attributes.Add("onclick", pscript)
gonza