2009-12-23 9 views
161

Vorrei mostrare un pulsante di opzione, è stato inviato il valore, ma a seconda delle circostanze, non è modificabile. Disabilitato non funziona, perché non invia il valore (o lo fa?), E grigi il pulsante di opzione. La sola lettura è davvero ciò che sto cercando, ma per qualche misterioso motivo non funziona.Perché i pulsanti di opzione non possono essere "readonly"?

C'è qualche trucco strano che devo tirare per ottenere la sola lettura per funzionare come previsto? Dovrei invece farlo in JavaScript?

Per inciso, qualcuno sa perché la lettura sola non funziona nei pulsanti di opzione, mentre funziona in altri tag di input? Questa è una di quelle incomprensibili omissioni nelle specifiche HTML?

+5

Pensate da il punto di vista di un utente. Perché visualizzare un pulsante che non possono fare clic? –

+45

Perché visualizzare un pulsante non è possibile fare clic? Perché voglio che sappiano che il pulsante è lì, ma non voglio che siano in grado di fare clic in questo momento. Ma forse dopo. È una forma dinamica, dopo tutto. Perché un pulsante di opzione dovrebbe essere diverso da qualsiasi altro campo di input? – mcv

+6

Ecco le specifiche: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2 "I seguenti elementi supportano l'attributo readonly: INPUT e TEXTAREA." Che è ovviamente sbagliato. Di nuovo qui, però, vediamo un riepilogo più accurato: http://www.w3.org/TR/WD-forms-970402#readonly "READONLY si applica agli elementi di INPUT di tipo TEXT o PASSWORD e al TEXTAREA elemento." Sembra che questo è scivolato tra le lacune di recs e specifiche. – graphicdivine

risposta

71

Ho simulato di sola lettura su un pulsante di opzione disattivando solo i pulsanti di opzione non selezionati. Mantiene all'utente la possibilità di selezionare un valore diverso e il valore selezionato verrà sempre pubblicato su submit.

utilizzando jQuery per fare in sola lettura:

$(':radio:not(:checked)').attr('disabled', true); 

Questo approccio ha funzionato anche per fare un elenco di selezione in sola lettura, se non che è necessario disabilitare ogni opzione non-selezionata.

+2

Grazie a @Megan, questa è un'ottima soluzione –

+4

Una variante su questo per consentire di utilizzare la proprietà 'readonly', in quanto l'OP si aspettava che funzionasse:' $ (': radio [readonly ]: not (: checked) '). attr (' disabled ', true); ' – wodow

182

I pulsanti di opzione devono essere solo di sola lettura se sono disponibili altre opzioni. Se non si dispone di altre opzioni, non è possibile deselezionare un pulsante di opzione selezionato. Se si dispone di altre opzioni, è possibile impedire all'utente di modificare il valore semplicemente disabilitando le altre opzioni:

<input type="radio" name="foo" value="Y" checked> 
<input type="radio" name="foo" value="N" disabled> 

Fiddle: http://jsfiddle.net/qqVGu/

+3

Il problema con la prima soluzione è che se voglio abilitare il radiobutton tramite javascript, ho improvvisamente due campi con lo stesso nome, quindi ho per pulire uno di loro. Oppure usa quello nascosto per davvero e chiedi al pulsante radio di impostare il valore del campo nascosto.Etere modo, è solo un po 'più ingombrante di quanto vorrei un radiobutton. La tua seconda soluzione, anche se non ne dubito, funziona come un brutto scherzo. Quindi immagino che la soluzione javascript sia l'unica che soddisfa i miei criteri. Ci andrò. – mcv

+0

La soluzione 2 è in realtà una cattiva modifica che probabilmente non funzionerà su browser meno utilizzati, come "link". Inoltre, non funzionerà su tutti i browser perché è possibile eseguirne il TAB. Confonderà semplicemente l'utente. –

+7

Soluzione 1 per favore! È l'unico correttamente accessibile. E se hai bisogno di copiarlo, è solo una riga in più per impostare l'abilitazione del campo nascosto al contrario dell'abilitazione della radio. – bobince

17

Questo è il trucco si può andare con.

<input type="radio" name="name" onclick="this.checked = false;" /> 
+4

Esattamente quello che stavo pensando, anche se sarebbe meglio se chiarissi che dovrebbe essere "onClick =" this.checked = <%=value%> "' di una certa varietà :) – JustLoren

+0

che è bello sapere. selezionato può avere valori veri o falsi. – Sarfraz

+0

Solo un avvertimento che questo non funzionerà per quelli di noi che navigano con javascript non attivato per impostazione predefinita. – tloach

1

Prova l'attributo disabled, ma credo che il non sarà possibile ottenere il valore dei pulsanti di opzione. o impostare le immagini invece come:

<img src="itischecked.gif" alt="[x]" />radio button option 

migliori saluti.

+0

Questo consiglio è buono .. –

+1

oh, il mio codice html è stato rimosso: img src = "itIsChecked.gif" alt = "[x]" OptionChecked – Tim

1

Una soluzione abbastanza semplice sarebbe quella di creare una funzione javascript invitato del form "onsubmit" evento per abilitare il radiobutton in modo che il suo valore sia registrato con il resto del modulo.
Non sembra essere un'omissione sulle specifiche HTML, ma una scelta di progettazione (una logica, IMHO), un radiobutton non può essere di sola lettura come un pulsante non può essere, se non si vuole usarlo , quindi disabilitarlo.

5

La soluzione migliore per impostare lo stato selezionato o deselezionato (da client o server) e per non consentire all'utente di cambiarlo dopo i reparti (i.e renderlo di sola lettura) effettuare le seguenti operazioni:

<input type="radio" name="name" onclick="javascript: return false;" /> 
-1

su init:

pscript = "try{if($(this).attr('readonly')){return false;};}catch(err){};" 

Me.Attributes.Add("onclick", pscript) 

gonza

+1

Come è questa una risposta alla domanda? –

2

mi è venuta in mente un modo javascript-pesante per raggiungere uno stato di sola lettura per le caselle di controllo e pulsanti radio. È testato contro le versioni correnti di Firefox, Opera, Safari, Google Chrome, così come le versioni attuali e precedenti di IE (fino a IE7).

Perché non utilizzare semplicemente la proprietà disattivata che chiedi? Quando si stampa la pagina, gli elementi di input disabilitati vengono visualizzati in un colore grigio. Il cliente per cui è stato implementato voleva che tutti gli elementi risultassero dello stesso colore.

Non sono sicuro di poter pubblicare il codice sorgente qui, mentre lo sviluppavo mentre lavoravo per un'azienda, ma posso sicuramente condividere i concetti.

Con eventi onmousedown, è possibile leggere lo stato di selezione prima che l'azione di clic la modifichi. Quindi memorizzi queste informazioni e quindi ripristini questi stati 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 porzione JavaScript di questo sarebbe quindi lavorare simili (nuovamente solo i concetti):

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

È ora possibile abilitare/disabilitare i pulsanti di opzione/caselle cambiando l'onclick e onmousedown proprietà gli elementi di input.

1

Ho trovato che l'uso di onclick='this.checked = false;' ha funzionato in una certa misura. Un pulsante di opzione cliccato non sarebbe stato selezionato. Tuttavia, se è stato selezionato un pulsante di opzione già selezionato (ad esempio, un valore predefinito), il pulsante di opzione non è più selezionato.

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

Per questo scenario, lasciando il valore predefinito solo e disabilitando l'altro pulsante (s) conserva il pulsante già selezionato e impedisce che venga selezionata.

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

questa soluzione non è il modo più elegante di prevenire il valore di default venga modificata, ma funzionerà se javascript è abilitato.

9

Ho una forma lunga (oltre 250 campi) che pubblica in un db. È un'applicazione di lavoro online. Quando un amministratore va a cercare un'applicazione che è stata archiviata, il modulo viene popolato con i dati del db. I testi di input e le textareas vengono sostituiti con il testo inviato ma le radio e le caselle di controllo sono utili per mantenere gli elementi del modulo. Disabilitarli li rende più difficili da leggere. L'impostazione della proprietà .checked su false onclick non funzionerà perché potrebbero essere state verificate dall'utente che ha compilato l'app. Comunque ...

onclick="return false;" 

funziona come un incantesimo per "disabilitare" le radio e le caselle ipso facto.

+0

non funziona su IE. –

1

Per i pulsanti di opzione non selezionati, contrassegnarli come disabilitati. Ciò impedisce loro di rispondere all'input dell'utente e di cancellare il pulsante di opzione selezionato.Ad esempio:

<input type="radio" name="var" checked="yes" value="Yes"></input> 
<input type="radio" name="var" disabled="yes" value="No"></input> 
+4

'checked =" yes "'? Che specifica è? Usa 'checked =" checked "' o solo l'attributo 'checked' senza un valore. Lo stesso per 'disabled'. –

2

JavaScript: questo ha funzionato per me.

<script> 
$(document).ready(function() { 
    $('#YourTableId').find('*').each(function() { $(this).attr("disabled", true); }); 
}); 
</script> 

Motivo:

  1. $('#YourTableId').find('*') -> questo restituisce tutti i tag.

  2. $('#YourTableId').find('*').each(function() { $(this).attr("disabled", true); }); itera su tutti gli oggetti catturati in questo e disabilita i tag di ingresso.

Analysis (debug):

  1. form:radiobutton è considerato internamente come tag "input".

  2. Come nella funzione di cui sopra(), se si tenta di stampare document.write(this.tagName);

  3. Ovunque, in tag si trovano i pulsanti di opzione, restituisce un tag input.

Quindi, sopra la linea di codice può essere più ottimizzato per i tag dei pulsanti di scelta, sostituendo * con l'input: “E 'questo uno di quei omissioni incomprensibili nelle specifiche HTML” $('#YourTableId').find('input').each(function() { $(this).attr("disabled", true); });