jak POST / przesłać pole wyboru danych wejściowych, które jest wyłączone?

Mam pole wyboru, które w pewnych warunkach musi być wyłączone. Okazuje się, że HTTP nie wysyła wyłączonych danych wejściowych.

Jak mogę to obejść? przesyłanie danych wejściowych, nawet jeśli jest wyłączone, i ich wyłączanie?

UPDATE : READONLYnie działa na polach wyboru

Możesz użyć, disabled="disabled"ale w tym momencie wartość pola wyboru nie pojawi się w POSTwartościach. Jedną ze strategii jest dodanie ukrytego pola przechowującego wartość pola wyboru w tym samym formularzu i odczytanie wartości z tego pola

Po prostu zmień disablednareadonly

Rozwiązałem ten problem.

Ponieważ readonly="readonly"tag nie działa (próbowałem różnych przeglądarek), musisz użyć disabled="disabled" zamiast tego. Ale wtedy wartość twojego pola wyboru nie zostanie opublikowana ...

Oto moje rozwiązanie:

Aby uzyskać wygląd „tylko do odczytu” i wartość pola wyboru POST w tym samym czasie, po prostu dodaj ukryte „wejście” o tej samej nazwie i wartości co pole wyboru . Musisz trzymać go obok pola wyboru lub między tymi samymi <form></form>tagami:

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

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

Ponadto, po prostu, abyś wiedział, readonly="readonly", readonly="true", readonly="",lub po prostu READONLYNIE rozwiążę tego! Spędziłem kilka godzin, aby to rozgryźć!

To odniesienie również NIE ma znaczenia (może jeszcze nie być lub już nie, nie mam pojęcia): http://www.w3schools.com/tags/att_input_readonly.asp

Jeśli jesteś zadowolony z używania JQuery, usuń atrybut disabled podczas przesyłania formularza:

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

Możesz sobie z tym poradzić w ten sposób ... Dla każdego pola wyboru utwórz ukryte pole z tym samym nameatrybutem. Ale ustaw wartość tego ukrytego pola na pewną wartość domyślną, na podstawie której możesz przetestować. Na przykład..

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

Jeśli pole wyboru jest „zaznaczone” podczas przesyłania formularza, wówczas wartość tego parametru formularza będzie wynosić

"agree,false"

Jeśli pole wyboru nie jest zaznaczone, wartość będzie

"false"

Możesz użyć dowolnej wartości zamiast „false”, ale masz pomysł.

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

Zacząłem od problemu: „jak POST / przesłać pole wyboru danych wejściowych, które jest wyłączone?” aw mojej odpowiedzi pominąłem komentarz: „Jeśli chcemy wyłączyć pole wyboru, z pewnością musimy zachować wartość z prefiksem (zaznaczoną lub niezaznaczoną), a także chcemy, aby użytkownik był tego świadomy (w przeciwnym razie powinniśmy użyć typu ukrytego i nie pole wyboru) ”. W mojej odpowiedzi przypuszczałem, że chcemy mieć zawsze zaznaczone pole wyboru i ten kod działa w ten sposób. Jeśli klikniemy na ten ckeckbox, zostanie on zawsze sprawdzony, a jego wartość zostanie WYSŁANA / Przesłana! W ten sam sposób, jeśli napiszę onclick = "this.checked = false" bez zaznaczenia = "zaznaczone" (uwaga: domyślnie nie jest zaznaczone), to na zawsze pozostanie odznaczone, a jego wartość nie zostanie wysłana / przesłana !.

stwórz klasę css np:

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

zastosuj tę klasę zamiast wyłączonego atrybutu

Najprostszy sposób to:

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

Uniemożliwi to użytkownikowi usunięcie zaznaczenia tego pola wyboru i nadal będzie przesyłać swoją wartość po przesłaniu formularza. Usuń zaznaczone, jeśli chcesz, aby użytkownik nie mógł zaznaczyć tego pola wyboru.

Możesz także użyć javascript, aby wyczyścić onclick po spełnieniu określonego warunku (jeśli tego chcesz). Oto paskudne skrzypce pokazujące, o co mi chodzi. To nie jest idealne, ale rozumiesz sedno.

http://jsfiddle.net/vwUUc/

To działa jak urok:

1. Usuń atrybuty „wyłączone”
2. Zatwierdź formularz
3. Dodaj ponownie atrybuty. Najlepszym sposobem na to jest użycie pliku funkcji setTimeOut , np. Z opóźnieniem 1 milisekundy.

Jedyną wadą jest krótkie miganie wyłączonych pól wejściowych podczas przesyłania. Przynajmniej w moim scenariuszu nie stanowi to większego problemu!

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

});

Nie wyłączaj go; zamiast tego ustaw go na tylko do odczytu, chociaż nie ma to wpływu, ponieważ nie pozwala użytkownikowi na zmianę stanu. Ale możesz użyć jQuery, aby to wymusić (uniemożliwić użytkownikowi zmianę stanu pola wyboru:

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

Zakłada się, że wszystkie pola wyboru, których nie chcesz modyfikować, mają atrybut „tylko do odczytu”. na przykład.

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

Od:

• ustawienie atrybutu readonly na checkbox nie jest poprawne zgodnie ze specyfikacją HTML,
• użycie ukrytego elementu do przesłania wartości nie jest zbyt ładne i
• ustawienie JavaScript onclick, które zapobiega zmianie wartości, też nie jest zbyt przyjemne

Dam ci inną możliwość:

Ustaw swoje pole wyboru jako wyłączone, jak zwykle. Zanim formularz zostanie przesłany przez użytkownika, włącz to pole wyboru w 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>

Ponieważ pole wyboru jest włączone przed przesłaniem formularza, jego wartość jest publikowana w zwykły sposób. Jedyną rzeczą, która nie jest zbyt przyjemna w tym rozwiązaniu, jest to, że to pole wyboru zostaje włączone na chwilę i jest to widoczne dla użytkowników. Ale to tylko szczegół, z którym mogę żyć.

Niestety nie ma „prostego” rozwiązania. Atrybutu tylko do odczytu nie można zastosować do pól wyboru. Przeczytałem specyfikację W3 o polu wyboru i znalazłem winowajcę:

Jeśli formant nie ma bieżącej wartości podczas przesyłania formularza, agenci użytkownika nie muszą traktować go jako formantu pomyślnie. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Powoduje to, że stan niesprawdzony i stan wyłączony dają taką samą przeanalizowaną wartość.

• readonly = "readonly" nie jest prawidłowym atrybutem pól wyboru.
• onclick = "event.preventDefault ();" nie zawsze jest dobrym rozwiązaniem, ponieważ jest uruchamiane w samym polu wyboru. Ale w niektórych przypadkach może zadziałać urokiem.
• Włączenie pola wyboru onSubmit nie jest rozwiązaniem, ponieważ formant nadal nie jest traktowany jako kontrolka pomyślna, więc wartość nie zostanie przeanalizowana.
• Dodanie kolejnego ukrytego wejścia o tej samej nazwie w kodzie HTML nie działa, ponieważ pierwsza wartość kontrolna jest zastępowana przez drugą, ponieważ ma taką samą nazwę.

Jedynym w pełni sprawdzonym sposobem jest dodanie ukrytych danych wejściowych o tej samej nazwie z javascriptem podczas przesyłania formularza .

Możesz użyć małego fragmentu, który zrobiłem w tym celu:

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

Wyszukuje pierwszy formularz w dokumencie, gromadzi wszystkie dane wejściowe i wyszukuje wyłączone dane wejściowe. Gdy zostanie znalezione wyłączone wejście, w nadrzędnym węźle tworzone jest ukryte wejście o tej samej nazwie i wartości „on” (jeśli jego stan jest „zaznaczony”) i „” (jeśli jego stan to „” - nie jest zaznaczony).

Ta funkcja powinna być wyzwalana przez zdarzenie „onsubmit” w elemencie FORM jako:

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

Dodaj onsubmit="this['*nameofyourcheckbox*'].disabled=false"do formularza.

Nie ma innej opcji poza hiddenpolem, więc spróbuj użyć hiddenpola, jak pokazano w poniższym kodzie:

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

Funkcja some_name jest przykładem poprzedniej klauzuli do zarządzania drugim checkboxem, który jest zaznaczony (publikuje swoją wartość) lub niezaznaczony (nie publikuje swojej wartości) zgodnie z klauzulą ​​i użytkownik nie może modyfikować jej statusu; nie ma potrzeby wyłączania drugiego pola wyboru

Możesz go wyłączyć zgodnie z potrzebami, a następnie usunąć wyłączony atrybut przed przesłaniem formularza.

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

Dodawanie onclick="this.checked=true"Rozwiąż mój problem:
Przykład:

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

Oto kolejna obejście, którą można kontrolować z zaplecza.

ASPX

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

W ASPX.CS

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

Klasa jest dodawana tylko ze względu na styl.

Właśnie połączyłem sugestie HTML, JS i CSS w odpowiedziach tutaj

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

Ponieważ element nie jest „wyłączony”, nadal przechodzi przez POST.