Le caselle di controllo HTML possono essere impostate su sola lettura?

Pensavo che potessero essere, ma dato che non sto mettendo i miei soldi dove la mia bocca (per così dire) impostando l'attributo di sola lettura, in realtà non sembra fare nulla.

Preferirei non utilizzare Disabilitato, poiché desidero che le caselle di controllo selezionate vengano inviate con il resto del modulo, ma non voglio che il client sia in grado di modificarle in determinate circostanze.

puoi usare questo:

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

Ciò funziona perché la restituzione di false dall'evento click interrompe il proseguimento della catena di esecuzione.

READONLYnon funziona sulle caselle di controllo in quanto ti impedisce di modificare il valore di un campo , ma con una casella di controllo stai effettivamente modificando lo stato del campo (on || off)

Da faqs.org :

È importante capire che READONLY impedisce semplicemente all'utente di modificare il valore del campo, non di interagire con il campo. Nelle caselle di controllo, ad esempio, è possibile selezionarle o disattivarle (impostando così lo stato CHECKED) ma non si modifica il valore del campo.

Se non si desidera utilizzare disabledma si desidera comunque inviare il valore, che ne dici di inviare il valore come campo nascosto e di stamparne il contenuto per l'utente quando non soddisfano i criteri di modifica? per esempio

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Questa è una casella che non puoi cambiare:

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

Aggiungi solo disabled="disabled"come attributo.

Modifica per rispondere ai commenti:

Se si desidera che i dati vengano rinviati, una soluzione semplice consiste nell'applicare lo stesso nome a un input nascosto:

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

In questo modo, quando la casella di controllo è impostata su "disabilitato", serve solo allo scopo di una rappresentazione visiva dei dati, anziché essere effettivamente "collegato" ai dati. Nel post indietro, il valore dell'input nascosto viene inviato quando la casella di controllo è disabilitata.

<input type="checkbox" onclick="this.checked=!this.checked;">

Ma DEVI assolutamente convalidare i dati sul server per assicurarti che non siano stati modificati.

un'altra "soluzione semplice":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = "disabled" / disabled = true

Questo presenta un piccolo problema di usabilità.

Se si desidera visualizzare una casella di controllo, ma non lasciarla interagire con, perché anche una casella di controllo, allora?

Tuttavia, il mio approccio sarebbe usare disabilitato (L'utente si aspetta che una casella di controllo disabilitata non sia modificabile, invece di usare JS per far sì che una abilitata non funzioni), e aggiungere un gestore di invio modulo utilizzando javascript che abilita le caselle di controllo prima che il modulo sia presentata. In questo modo ottieni i tuoi valori pubblicati.

cioè qualcosa del genere:

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;
       }
    }
}

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

con jquery:

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

potrebbe comunque essere una buona idea dare qualche suggerimento visivo (css, testo, ...), che il controllo non accetterà input.

Ho usato questo per ottenere i risultati:

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

Mi è capitato di notare la soluzione fornita di seguito. In ho trovato la mia ricerca per lo stesso problema. Non so chi l'abbia pubblicato ma non è stato creato da me. Usa jQuery:

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

Questo renderebbe le caselle di sola lettura che sarebbero utili per mostrare i dati di sola lettura al client.

onclick="javascript: return false;"

Risposta tardiva, ma la maggior parte delle risposte sembra complicarla troppo.

A quanto ho capito, l'OP voleva sostanzialmente:

1. Casella di sola lettura per mostrare lo stato.
2. Valore restituito con modulo.

Si dovrebbe notare che:

1. L'OP ha preferito non utilizzare l' disabledattributo, perché "desidera che le caselle di controllo selezionate vengano inviate con il resto del modulo".
2. Le caselle di controllo non selezionate non vengono inviate con il modulo, poiché la citazione dal PO di cui sopra 1. indica che già lo sapevano. Fondamentalmente, il valore della casella di controllo esiste solo se è selezionato.
3. Una casella di controllo disabilitata indica chiaramente che non può essere modificata, in base alla progettazione, quindi è improbabile che un utente tenti di modificarlo.
4. Il valore di una casella di controllo non si limita a indicarne lo stato, come yeso false, ma può essere qualsiasi testo.

Pertanto, poiché l' readonlyattributo non funziona, la soluzione migliore, che non richiede javascript, è:

1. Una casella di controllo disabilitata, senza nome o valore.
2. Se la casella di controllo deve essere visualizzata come selezionata, un campo nascosto con il nome e il valore memorizzati sul server.

Quindi per una casella di controllo selezionata:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Per una casella non selezionata:

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

Il problema principale con gli input disabilitati, in particolare le caselle di controllo, è il loro scarso contrasto che può essere un problema per alcuni con determinate disabilità visive. Potrebbe essere meglio indicare un valore con parole semplici, come Status: noneo Status: implemented, ma includendo l'input nascosto sopra quando viene utilizzato quest'ultimo, come:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

La maggior parte delle risposte attuali presenta uno o più di questi problemi:

1. Controlla solo il mouse, non la tastiera.
2. Controlla solo al caricamento della pagina.
3. Aggancia il cambiamento sempre popolare o invia eventi che non funzioneranno sempre se qualcos'altro li ha agganciati.
4. Richiedi un input nascosto o altri elementi / attributi speciali che devi annullare per riattivare la casella di controllo utilizzando JavaScript.

Quanto segue è semplice e non presenta nessuno di questi problemi.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Se la casella di controllo è di sola lettura, non cambierà. Se non lo è, lo farà. Usa jquery, ma probabilmente lo stai già utilizzando ...

Funziona.

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

Se si desidera che vengano inviati al server con il modulo ma non siano interattivi per l'utente, è possibile utilizzare pointer-events: nonein CSS ( funziona in tutti i browser moderni tranne IE10- e Opera 12- ) e impostare l'indice di tabulazione  -1per impedire la modifica tramite tastiera. Si noti inoltre che non è possibile utilizzare il labeltag poiché fare clic su di esso cambierà comunque lo stato.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

<input type="checkbox" onclick="return false" /> funzionerà per te, lo sto usando

Alcune delle risposte qui sembrano un po 'rotonde, ma ecco un piccolo trucco.

<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>​

quindi in jquery puoi scegliere una delle due opzioni:

$(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();
    });

});

​

demo: http://jsfiddle.net/5WFYt/

Basandoci sulle risposte sopra, se si utilizza jQuery, questa potrebbe essere una buona soluzione per tutti gli input:

<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>

Sto usando questo con Asp.Net MVC per impostare alcuni elementi del modulo in sola lettura. Quanto sopra funziona per il testo e le caselle di controllo impostando qualsiasi contenitore padre come .readonly come i seguenti scenari:

<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>

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

So che "disabilitato" non è una risposta accettabile, dal momento che l'operazione vuole che pubblichi. Tuttavia, dovrai sempre convalidare i valori sul lato server ANCHE se hai l'opzione di sola lettura impostata. Questo perché non è possibile impedire a un utente malintenzionato di pubblicare valori utilizzando l'attributo readonly.

Suggerisco di memorizzare il valore originale (lato server) e di impostarlo su disabilitato. Quindi, quando inviano il modulo, ignora tutti i valori pubblicati e accetta i valori originali che hai archiviato.

Apparirà e si comporterà come se fosse un valore di sola lettura. E gestisce (ignora) i post di utenti malintenzionati. Stai uccidendo 2 uccelli con una fava.

Avrei commentato la risposta di ConroyP, ma ciò richiede 50 reputazione che non ho. Ho abbastanza reputazione per pubblicare un'altra risposta. Scusate.

Il problema con la risposta di ConroyP è che la casella di controllo è resa immutabile nemmeno includendola nella pagina. Sebbene Electrons_Ahoy non stabilisca così tanto, la risposta migliore sarebbe quella in cui la casella di controllo immutabile sarebbe simile, se non uguale alla casella di controllo modificabile, come nel caso in cui viene applicato l'attributo "disabilitato". Una soluzione che affronta le due ragioni fornite da Electrons_Ahoy per non voler utilizzare l'attributo "disabilitato" non sarebbe necessariamente non valida perché utilizzava l'attributo "disabilitato".

Supponi due variabili booleane, $ controllato e $ disabilitato:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

La casella di controllo viene visualizzata come selezionata se $ controllato è vero. La casella di controllo viene visualizzata come deselezionata se $ controllato è falso. L'utente può modificare lo stato della casella di controllo se e solo se $ disabilitato è falso. Il parametro "my_name" non viene pubblicato quando la casella di controllo è deselezionata, dall'utente o meno. Il parametro "my_name = 1" viene pubblicato quando la casella di controllo è selezionata, dall'utente o meno. Credo che questo sia ciò che Electrons_Ahoy stava cercando.

No, le caselle di controllo di input non possono essere di sola lettura.

Ma puoi renderli di sola lettura con JavaScript!

Aggiungi questo codice ovunque e in qualsiasi momento per fare in modo che le caselle di controllo funzionino come previsto, impedendo all'utente di modificarlo in alcun modo.

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>

È possibile aggiungere questo script in qualsiasi momento dopo il caricamento di jQuery.

Funzionerà con elementi aggiunti dinamicamente.

Funziona raccogliendo l'evento click (che accade prima dell'evento change) su qualsiasi elemento della pagina, quindi controlla se questo elemento è una casella di controllo di sola lettura e, se lo è, quindi blocca la modifica.

Ci sono così tanti if per non influire sulle prestazioni della pagina.

Usa semplicemente un tag disabilitato come questo qui sotto.

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

un'idea alternativa è quella di utilizzare un overlay e coprire gli input di sola lettura

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

Se si desidera che TUTTE le caselle di controllo siano "bloccate" in modo che l'utente non possa modificare lo stato "controllato" se sono presenti attibute "di sola lettura", è possibile utilizzare jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

La cosa interessante di questo codice è che ti permette di cambiare l'attributo "readonly" in tutto il tuo codice senza dover ricollegare tutte le caselle di controllo.

Funziona anche con i pulsanti di opzione.

Il motivo principale per cui le persone desiderano una casella di controllo di sola lettura e (anche) un gruppo radio di sola lettura è che le informazioni che non possono essere modificate possano essere presentate all'utente nel modulo in cui sono state inserite.

OK disabilitato lo farà - sfortunatamente i controlli disabilitati non sono navigabili da tastiera e quindi non rispettano la legislazione sull'accessibilità. Questo è il più grande hangup in HTML che io conosca.

Contribuire molto molto tardi ... ma comunque. Al caricamento della pagina, utilizzare jquery per disabilitare tutte le caselle di controllo tranne quella attualmente selezionata. Quindi imposta quello attualmente selezionato come di sola lettura in modo che abbia un aspetto simile a quelli disabilitati. L'utente non può modificare il valore e il valore selezionato continua a essere inviato.

Molto tardi alla festa, ma ho trovato una risposta per MVC (5), ho disabilitato CheckBox e ho aggiunto un HiddenFOR PRIMA della casella di controllo, quindi quando viene pubblicato se trova prima il campo Hidden e utilizza quel valore. Questo funziona.

 <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>

Vorrei usare l'attributo readonly

<input type="checkbox" readonly>

Quindi utilizzare CSS per disabilitare le interazioni:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Nota che usando la pseudo-classe: sola lettura non funziona qui.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

Non voglio che il cliente sia in grado di cambiarlo in determinate circostanze.

READONLY stesso non funzionerà. Potresti essere in grado di fare qualcosa di strano con CSS ma di solito li rendiamo disabilitati.

ATTENZIONE: se vengono posticipati, il cliente può modificarli, punto. Non puoi fare affidamento in sola lettura per impedire a un utente di cambiare qualcosa. Potrebbero sempre usare il violinista o semplicemente cantare l'html con firebug o qualcosa del genere.

La mia soluzione è in realtà l'opposto della soluzione FlySwat, ma non sono sicuro che funzionerà per la tua situazione. Ho un gruppo di caselle di controllo e ognuna ha un gestore onClick che invia il modulo (sono usati per modificare le impostazioni del filtro per una tabella). Non voglio consentire più clic, poiché i clic successivi dopo il primo vengono ignorati. Quindi disabilito tutte le caselle di controllo dopo il primo clic e dopo aver inviato il modulo:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Le caselle di controllo si trovano in un elemento span con un ID di "filtri": la seconda parte del codice è un'istruzione jQuery che scorre attraverso le caselle di controllo e disabilita ognuna. In questo modo, i valori della casella di controllo vengono comunque inviati tramite il modulo (poiché il modulo è stato inviato prima di disabilitarli) e impedisce all'utente di modificarli fino al ricaricamento della pagina.