come pubblicare / inviare una casella di controllo di input che è disabilitata?

Ho una casella che, date determinate condizioni, deve essere disabilitata. Si scopre che HTTP non pubblica input disabilitati.

Come posso aggirarlo? inviare l'input anche se è disabilitato e mantenere l'input disabilitato?

AGGIORNAMENTO : READONLYnon funziona con le caselle di controllo

È possibile utilizzare disabled="disabled"ma a questo punto il valore della casella non verrà visualizzato nei POSTvalori. Una delle strategie consiste nell'aggiungere un campo nascosto contenente il valore della casella di controllo nello stesso modulo e rileggere il valore da quel campo

Passa semplicemente disabledareadonly

Ho risolto quel problema.

Poiché il readonly="readonly"tag non funziona (ho provato diversi browser), devi disabled="disabled" invece utilizzare . Ma il valore della tua casella non verrà pubblicato quindi ...

Ecco la mia soluzione:

Per ottenere look "sola lettura" e il valore della casella di controllo POST contemporaneamente, basta aggiungere un "input" nascosto con lo stesso nome e valore della casella di controllo . Devi tenerlo vicino alla tua casella di controllo o tra gli stessi <form></form>tag:

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

Inoltre, solo per farti sapere readonly="readonly", readonly="true", readonly="",o semplicemente READONLYNON risolverlo! Ho trascorso alcune ore a capirlo!

Anche questo riferimento NON è rilevante (potrebbe non essere ancora, o non più, non ne ho idea): http://www.w3schools.com/tags/att_input_readonly.asp

Se sei soddisfatto dell'uso di JQuery, rimuovi l'attributo disabilitato quando invii il modulo:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

Potresti gestirlo in questo modo ... Per ogni casella di controllo, crea un campo nascosto con lo stesso nameattributo. Ma imposta il valore di quel campo nascosto con un valore predefinito che potresti provare. Per esempio..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

Se la casella di controllo è "selezionata" quando viene inviato il modulo, sarà il valore di quel parametro del modulo

"agree,false"

Se la casella di controllo non è selezionata, il valore sarebbe

"false"

È possibile utilizzare qualsiasi valore anziché "false", ma si ottiene l'idea.

<input type="checkbox" checked="checked" onclick="this.checked=true" />

Ho iniziato dal problema: "come pubblicare / inviare una casella di controllo di input che è disabilitata?" e nella mia risposta ho saltato il commento: "Se vogliamo disabilitare una casella di controllo dobbiamo sicuramente mantenere un valore prefissato (spuntato o deselezionato) e vogliamo anche che l'utente ne sia consapevole (altrimenti dovremmo usare un tipo nascosto e non una casella di controllo) ". Nella mia risposta suppongo che vogliamo mantenere sempre una casella selezionata e che il codice funzioni in questo modo. Se clicchiamo su quella casella verrà controllato per sempre e il suo valore sarà POSTATO / inviato! Allo stesso modo se scrivo onclick = "this.checked = false" senza spuntato = "spuntato" (nota: il default è deselezionato) sarà sempre deselezionato e il suo valore non sarà POSTATO / inviato !.

creare una classe CSS ad es .:

.disable{
        pointer-events: none;
        opacity: 0.5;
}

applica questa classe anziché l'attributo disabilitato

Il modo più semplice per farlo è:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

Ciò impedirà all'utente di deselezionare questa casella di controllo e invierà comunque il suo valore quando viene inviato il modulo. Rimuovi selezionato se si desidera che l'utente non sia in grado di selezionare questa casella di controllo.

Inoltre, puoi utilizzare javascript per cancellare il clic una volta che una determinata condizione è stata soddisfatta (se è quello che stai cercando). Ecco un violino sporco che mostra cosa intendo. Non è perfetto, ma hai capito bene.

http://jsfiddle.net/vwUUc/

Funziona come un incantesimo:

1. Rimuovere gli attributi "disabilitati"
2. Invia il modulo
3. Aggiungi di nuovo gli attributi. Il modo migliore per farlo è utilizzare una funzione setTimeOut , ad esempio con un ritardo di 1 millisecondo.

L'unico svantaggio è il breve lampeggiamento dei campi di input disabilitati durante l'invio. Almeno nel mio scenario non è un grosso problema!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

Non disabilitarlo; invece impostalo su sola lettura, anche se questo non ha alcun effetto in quanto non consente all'utente di cambiare lo stato. Ma puoi usare jQuery per imporlo (impedisci all'utente di cambiare lo stato della casella di controllo:

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

Ciò presuppone che tutte le caselle di controllo che non si desidera modificare abbiano l'attributo "sola lettura". per esempio.

<input type="checkbox" readonly="readonly">

Da:

• l'impostazione dell'attributo readonly su checkbox non è valida in base alle specifiche HTML,
• usare l'elemento nascosto per inviare valore non è molto carino e
• l'impostazione di onclick JavaScript che impedisce la modifica del valore non è molto piacevole

Ti offrirò un'altra possibilità:

Imposta la casella come disabilitata come di consueto. E prima che il modulo sia inviato dall'utente abilita questa casella di controllo da JavaScript.

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

Poiché la casella di controllo è abilitata prima dell'invio del modulo, il suo valore viene registrato in modo comune. L'unica cosa che non è molto piacevole con questa soluzione è che questa casella di controllo viene abilitata per un po 'e che può essere vista dagli utenti. Ma è solo un dettaglio con cui posso convivere.

Sfortunatamente non esiste una soluzione "semplice". L'attributo in sola lettura non può essere applicato alle caselle di controllo. Ho letto le specifiche W3 sulla casella di controllo e ho trovato il colpevole:

Se un controllo non ha un valore corrente quando viene inviato il modulo, gli interpreti non sono tenuti a trattarlo come un controllo riuscito. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Ciò causa lo stato non controllato e lo stato disabilitato per ottenere lo stesso valore analizzato.

• readonly = "readonly" non è un attributo valido per le caselle di controllo.
• onclick = "event.preventDefault ();" non è sempre una buona soluzione in quanto è attivato nella casella stessa. Ma può funzionare in alcuni casi.
• Abilitare la casella di controllo onSubmit non è una soluzione perché il controllo non viene ancora considerato come un controllo riuscito, quindi il valore non verrà analizzato.
• L'aggiunta di un altro input nascosto con lo stesso nome nel codice HTML non funziona perché il primo valore di controllo viene sovrascritto dal secondo valore di controllo poiché ha lo stesso nome.

L'unico modo completo per farlo è quello di aggiungere un input nascosto con lo stesso nome con javascript sull'invio del modulo .

Puoi utilizzare il piccolo frammento che ho creato per questo:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

Questo cerca il primo modulo nel documento, raccoglie tutti gli input e cerca input disabilitati. Quando viene trovato un input disabilitato, viene creato un input nascosto nel parentNode con lo stesso nome e il valore 'on' (se lo stato è 'controllato') e '' (se lo stato è '' - non selezionato).

Questa funzione dovrebbe essere attivata dall'evento "onsubmit" nell'elemento FORM come:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>

Aggiungi onsubmit="this['*nameofyourcheckbox*'].disabled=false"al modulo.

Non esiste altra opzione oltre a un hiddencampo, quindi prova a utilizzare un hiddencampo come mostrato nel codice seguente:

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

La funzione some_name è un esempio di una clausola precedente per gestire la seconda casella di controllo che è selezionata (pubblica il suo valore) o deselezionata (non registra il suo valore) secondo la clausola e l'utente non può modificarne lo stato; non è necessario gestire alcuna disabilitazione della seconda casella di controllo

È possibile mantenerlo disabilitato come desiderato, quindi rimuovere l'attributo disabilitato prima dell'invio del modulo.

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

Aggiunta onclick="this.checked=true"Risolvi il mio problema:
Esempio:

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

Ecco un'altra soluzione che può essere controllata dal backend.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

In ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

La classe viene aggiunta solo per scopi di stile.

Ho appena combinato i suggerimenti HTML, JS e CSS nelle risposte qui

HTML:

<input type="checkbox" readonly>

jQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS:

input[type="checkbox"][readonly] {
  cursor: not-allowed;
  opacity: 0.5;
}

Poiché l'elemento non è "disabilitato", passa comunque attraverso il POST.