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


130

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?


Myślę, że to rozwiązanie również tutaj pomaga: stackoverflow.com/questions/12769664/…
Sergej Fomin

Myślę, że to rozwiązanie również tutaj pomaga: stackoverflow.com/questions/12769664/…
Sergej Fomin

Odpowiedzi:


106

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


8
Aby był prawidłowy HTML, ustaw konkretnie wartość readonly na readonly, tj .:<input name="foo" value="bar" readonly="readonly" />
Matt Huggins

5
Aby pole wejściowe „tylko do odczytu” wyglądało jak pole „wyłączone”, ustaw „styl =” kolor: szary; kolor tła: # F0F0F0; „”.
Dan Nissenbaum

3
@MattHuggins Ustawienie wartości dla atrybutów tylko-atrybutów, takich jak zaznaczone, tylko do odczytu itp. ... i koniec ukośnika w atrybutach
nieparujących

Btw: Być może ktoś potyka się o to: NIE UŻYWAJ GO dla wejścia typu = przycisk, nie będą "wyłączone", użyj "disabled = 'disabled'"
Meister Schnitzel

2
readonlynie zadziała, ponieważ nie będziesz w stanie opublikować wartości checkboxa z takim tagiem, użyj disabledwraz z ukrytym elementem wejściowym do przechowywania wartości checkboxa, zobacz jak: stackoverflow.com/a/8274787/448816
mikhail-t

91

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


tutaj muszą być takie same identyfikatory dla danych wejściowych ukrytych i pól wyboru?
user2167382

nie, Id może być dowolne, ale „nazwa” i „wartość” muszą być takie same.
mikhail-t

Jak wiarygodne jest to w różnych przeglądarkach?
Tim

zostało to przetestowane i działało dobrze w najnowszej przeglądarce Chrome, Firefox i IE 11, oto implementacja, wypróbuj ją w przeglądarce: mvccbl.com/…
mikhail-t

75

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

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

Czy to sprawi, że kontrola będzie „włączona” w interfejsie użytkownika?
anar khalilov

Usuwa atrybut niepełnosprawności, więc w teorii tak. W praktyce nie sądzę, aby użytkownik mógł zmienić pole za pomocą interfejsu użytkownika między tym wydarzeniem a przesyłanym formularzem ... Chciałbym wiedzieć na pewno.
Tristan Channing

Trochę stary, ale jako dodatkowa uwaga: jeśli używasz <select>lub <textfield>lub innych elementów HTML obsługujących disabledatrybut, możesz je wybrać i włączyć wszystkie za pomocą: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil

10

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


6
Czy nie nienawidzisz tego, kiedy piszesz jakieś skomplikowane rozwiązanie problemu, a potem, kiedy odświeżasz, ktoś (jak Francesco) idzie i pisze prosty, jednolinijkowy tekst? ;)
jessegavin

Jest to idealne rozwiązanie do tego, co próbuję osiągnąć, chcę, aby niezaznaczone pole wyboru przesłało wartość zamiast niczego, dzięki: D.
Geoffrey

1
@jessegavin Biorąc pod uwagę, że jego „simple one liner” już nie działa i zaktualizował swoją odpowiedź, tak aby zawierała Twoją, nie, nie mogę powiedzieć, że tak.
RyanfaeScotland

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


to po prostu powiela to, co już robi pole wyboru, ale jeśli zostało wyłączone przez javascript lub coś innego, nadal będzie wyłączone, czy mógłbyś wyjaśnić trochę więcej, do czego dążyłeś, może źle rozumiem, ponieważ jest to tylko wiersz kodu
ScottC

8

stwórz klasę css np:

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

zastosuj tę klasę zamiast wyłączonego atrybutu


7

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/


4

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

});

3

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

Dziękuję Ci za to! Z jakiegoś powodu „ukryte” dane wejściowe nie działały. To mnie uratowało. Naprawdę fajny hack!
NewbieProgrammer

3

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


1

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


1

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

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


0

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

0

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

0

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.


0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.