ejemplo - html checkbox group




¿Se pueden configurar las casillas de verificación HTML como de solo lectura? (20)

Simplemente no quiero que el cliente pueda cambiarlos bajo ciertas circunstancias.

READONLY en sí no funcionará. Es posible que pueda hacer algo funky con CSS, pero generalmente los deshabilitamos.

ADVERTENCIA: Si se publican de nuevo, el cliente puede cambiarlos, punto. No puede confiar en solo lectura para evitar que un usuario cambie algo. Siempre se podría usar el violinista o simplemente modificar el html con firebug o algo así.

Pensé que podrían ser, pero como no estoy poniendo mi dinero donde estaba mi boca (por así decirlo), establecer el atributo de solo lectura no parece realmente hacer nada.

Prefiero no utilizar Deshabilitado, ya que quiero que las casillas de verificación marcadas se envíen con el resto del formulario, simplemente no quiero que el cliente pueda cambiarlas en determinadas circunstancias.


Al enviar el formulario, en realidad pasamos el valor de la casilla de verificación, no el estado (marcado / sin marcar). El atributo de solo lectura nos impide editar el valor, pero no el estado. Si desea tener un campo de solo lectura que represente el valor que desea enviar, use el texto de solo lectura.


Algunas de las respuestas aquí parecen un poco rotundas, pero aquí hay un pequeño truco.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

Luego, en jQuery puede elegir una de las dos opciones:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

Al aire libre

demostración: http://jsfiddle.net/5WFYt/


Contribuyendo muy tarde ... pero de todos modos. En la carga de la página, use jquery para deshabilitar todas las casillas de verificación excepto la seleccionada actualmente. Luego configure el seleccionado actualmente como solo lectura para que tenga un aspecto similar al de los deshabilitados. El usuario no puede cambiar el valor y el valor seleccionado aún se envía.


Esta es una casilla de verificación que no puedes cambiar:

<input type="checkbox" disabled="disabled" checked="checked">

Solo agregue disabled="disabled" como un atributo.


Editar para abordar los comentarios:

Si desea que los datos se vuelvan a publicar, una solución simple es aplicar el mismo nombre a una entrada oculta:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

De esta manera, cuando la casilla de verificación está configurada como "deshabilitada", solo sirve para una representación visual de los datos, en lugar de estar realmente "vinculada" a los datos. En la publicación posterior, el valor de la entrada oculta se envía cuando la casilla de verificación está deshabilitada.


Esto presenta un poco de un problema de usabilidad.

Si desea mostrar una casilla de verificación, pero no permitir que se interactúe con ella, ¿por qué incluso una casilla de verificación?

Sin embargo, mi enfoque sería utilizar deshabilitado (el usuario espera que una casilla de verificación deshabilitada no sea editable, en lugar de usar JS para que una habilitada no funcione), y agregar un controlador de envío de formulario usando javascript que habilite las casillas de verificación justo antes de que se complete el formulario. presentado. De esta manera usted obtiene sus valores publicados.

es decir, algo como esto:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

La razón principal por la que las personas desean una casilla de verificación de solo lectura y (también) un grupo de radio de solo lectura es para que la información que no se puede cambiar se pueda presentar al usuario en el formulario en que se ingresó.

Aceptar desactivado hará esto: desafortunadamente, los controles desactivados no son navegables por el teclado y, por lo tanto, no cumplen con todas las leyes de accesibilidad. Este es el cuelgue MÁS GRANDE en HTML que conozco.


Me di cuenta de la solución dada a continuación. En lo encontré mi investigación por el mismo tema. No sé quién lo había publicado, pero no fue hecho por mí. Utiliza jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

Esto haría que las casillas de verificación sean de solo lectura, lo que sería útil para mostrar datos de solo lectura al cliente.


Muy tarde para la fiesta, pero encontré una respuesta para MVC (5) Deshabilité el CheckBox y agregué un HiddenFor ANTES de la casilla de verificación, así que cuando se está publicando, primero se encuentra el campo Oculto y se usa ese valor. Esto funciona.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

No, las casillas de verificación de entrada no pueden ser de solo lectura.

¡Pero puedes hacerlos solo con javascript!

Agregue este código en cualquier lugar y en cualquier momento para hacer que las casillas de verificación funcionen como si se supusiera, evitando que el usuario lo modifique de cualquier manera.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Puede agregar este script en cualquier momento después de que jQuery se haya cargado.

Funcionará para elementos añadidos dinámicamente.

Funciona recogiendo el evento de clic (que ocurre antes del evento de cambio) en cualquier elemento de la página, luego verifica si este elemento es una casilla de verificación de solo lectura, y si lo es, entonces bloquea el cambio.

Hay tantos ifs para que no afecte el rendimiento de la página.


Sé que "deshabilitado" no es una respuesta aceptable, ya que la operadora quiere que se publique. Sin embargo, siempre tendrá que validar los valores en el lado AÚN del servidor si tiene configurada la opción de solo lectura. Esto se debe a que no puede impedir que un usuario malintencionado publique valores utilizando el atributo de solo lectura.

Sugiero almacenar el valor original (lado del servidor) y configurarlo en deshabilitado. Luego, cuando envían el formulario, ignore los valores publicados y tome los valores originales que almacenó.

Se verá y se comportará como si fuera un valor de solo lectura. Y maneja (ignora) las publicaciones de usuarios malintencionados. Estás matando 2 pájaros de un tiro.


Si alguien más está usando MVC y una plantilla de editor, así es como controlo la visualización de una propiedad de solo lectura (uso un atributo personalizado para obtener el valor en la declaración if)

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}

Sobre la base de las respuestas anteriores, si usa jQuery, esta puede ser una buena solución para todas las entradas:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Estoy usando esto con Asp.Net MVC para establecer algunos elementos de formulario de solo lectura. Lo anterior funciona para el texto y las casillas de verificación configurando cualquier contenedor principal como .readonly, como en los siguientes escenarios:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

Utilicé esto para lograr los resultados:

<input type=checkbox onclick="return false;" onkeydown="return false;" />


<input type="checkbox" onclick="return false" /> funcionará para ti, estoy usando esto


<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

<input name="testName" type="checkbox" disabled>

<input type="checkbox" readonly="readonly" name="..." />

con jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

Todavía podría ser una buena idea dar alguna sugerencia visual (css, texto, ...), de que el control no acepte entradas.


<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >




checkbox