Mam formę, w której muszę publikować wartości formularzy do mojej klasy działania. W tym formularzu mam pole wyboru, które musi być odczytane. Próbowałem ustawić disabled="true", ale to nie działa, gdy publikuje do klasy działania.

Więc proszę poradzić?

59
Naga 4 wrzesień 2012, 19:58

11 odpowiedzi

Najlepsza odpowiedź

Możesz łatwo zrobić to przez CSS. html:

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" readonly />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS:

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

Próbny

27
Nagama Inamdar 5 styczeń 2017, 14:05

Prosty, aby zrozumieć i pracować dla mnie

<input type="checkbox" name="yourinputname" value="inputvalue" disabled="disabled" />
0
Connectify_user 31 styczeń 2020, 11:59

Nie ma żadnej mienia, aby wybrać pole wyboru. Ale możesz spróbować tej sztuczki.

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

Demo

108
Kundan Singh Chouhan 4 wrzesień 2012, 16:01
<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>

http://jsfiddle.net/2srjc/

Jeśli martwisz się o kolejność kart, zwróć tylko fałszywe dla zdarzenia kluczy, gdy klawisz Tab nie został naciśnięty:

<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>

http://jsfiddle.net/2srjc/149/

39
Patrick Lee Scott 5 lipiec 2016, 19:09

Osobiście lubię to robić w ten sposób:

<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">

Myślę, że to lepsze z dwóch powodów:

  1. Użytkownik wyraźnie rozumiem, że nie może edytować tej wartości
  2. Wartość jest wysyłana podczas przesyłania formularza.
13
2540625 10 styczeń 2017, 04:20

Możesz po prostu dodać onclick="return false" - Spowoduje to zatrzymanie czynności domyślnej przeglądarki (zaznaczone pole wyboru / nie sprawdzone nie zostanie zmienione)

8
Viktor S. 4 wrzesień 2012, 16:01

Używam jQuery, więc mogę użyć atribudztwa o readonly w polu wyboru.

//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");

Jeśli chcesz wybrać się ponownie, musisz wykonać następujące czynności dla określonych wyboru.

$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
3
user1170104 15 lipiec 2015, 17:00

Zrób fałszywe pole wyboru bez nazwy i wartości, wymuszaj wartość w ukrytym polu:

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

UWAGA: Jeśli w polu wyboru umieścisz nazwę i wartość, będzie tak nadpisany przez wejście o tej samej nazwie

2
Luca C. 8 maj 2018, 10:51

Żaden z powyższych nie pracował dla mnie. Oto moje rozwiązanie wanilii.js:

(function() {
    function handleSubmit(event) {
        var form = event.target;
        var nodes = form.querySelectorAll("input[disabled]");
        for (var node of nodes) {
            node.disabled = false;
        }
    }

    function init() {
        var submit_form_tag = document.getElementById('new_whatever');
        submit_form_tag.addEventListener('submit', handleSubmit, true);
    }

    window.onload = init_beworst;

})();

Pamiętaj, aby podać odpowiednią wymianę identyfikatora formularza.

Moja aplikacja ma trochę kontekstu, gdzie wstępnie sprawdzane są kilka pudełek, a inne masz limit liczby innych skrzynek, które możesz sprawdzić. Po trafieniu tego limitu wszystkie nie wstępnie sprawdzone pola są wyłączone, a jeśli usuniesz jeden, wszystkie wstępnie sprawdzone pola są ponownie włączone. Gdy prasy użytkownika prześlij wszystkie sprawdzone pola są przesyłane użytkownikowi, niezależnie od tego, czy są wstępnie sprawdzane, czy nie.

0
Eric 10 sierpień 2018, 23:05

Przez CSS:

<label for="">
  <input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>

zdarzenia wskaźnikowe nie są obsługiwane w IE & LT; 10

https://jsfiddle.net/fl4sh/3r0v8pug/2/

-1
Anton Efremenkov 8 grudzień 2017, 10:25
document.getElementById("your checkbox id").disabled=true;
-2
tinylcy 25 listopad 2015, 09:03