Czy pola wyboru HTML można ustawić na tylko do odczytu?

817

Myślałem, że mogą, ale skoro nie wkładam pieniędzy tam, gdzie moje usta (że tak powiem) ustawiają atrybut „tylko do odczytu”, to tak naprawdę nic nie robi.

Wolałbym nie używać opcji Wyłączone, ponieważ chcę, aby zaznaczone pola wyboru były przesyłane wraz z resztą formularza, po prostu nie chcę, aby klient mógł je zmienić w określonych okolicznościach.

Electrons_Ahoy
źródło
39
(Złośliwy) klient może zawsze zmienić wartość pola wyboru (lub wysłać dowolne żądania). Zawsze upewnij się, że wykonałeś właściwą weryfikację po stronie serwera!
knittl,
4
@knittl Ale normalny vistor nie ma (złośliwego) klienta. I normalny Vistor nie chciał zmieniać informacji (tak jest readonly)
Christian Gollhardt
3
@knittl Wydaje się, że lekceważysz cały sens readonly! Dlaczego więc ten atrybut istniałby!
Izhar Aazmi
10
@IzharAazmi: readonlyjest tylko atrybutem po stronie klienta, który pomaga przeglądarce poprawnie renderować witrynę, a następnie konstruować z niej prawidłowe żądanie. Serwer nie może i nie powinien wiedzieć o readonlyatrybucie renderowanej strony. Musi zakładać, że żądanie pochodzi z dowolnego miejsca (i prawdopodobnie ze złośliwymi intencjami); nigdy nie polegaj na danych dostarczonych przez użytkownika. Po co jednak wysyłać wartość pola wyboru, którego nie można edytować w żądaniu (jeśli ustawisz wartość przed renderowaniem, znasz już wartość w momencie przesłania żądania, więc nie ma potrzeby przesyłania jej w żądaniu)
knittl
4
@knittl Zgadzam się! Ale widzisz, że readonlyatrybut istnieje z jakiegoś powodu. Z pewnością nie ma to nic wspólnego z implementacją po stronie serwera. Ale jest po to, aby powiedzieć użytkownikowi „Hej! Ta wartość jest tutaj zakładana i / ale nie możesz jej zmienić”.
Izhar Aazmi

Odpowiedzi:

538

możesz użyć tego:

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

Działa to, ponieważ zwracanie wartości false ze zdarzenia click powoduje zatrzymanie łańcucha wykonywania.

Yanni
źródło
29
Zwrócenie wartości false w javascript uniemożliwia kontynuowanie łańcucha wykonania dla procedury obsługi kliknięcia lub klucza. Nie ma to nic wspólnego ze stanem pola wyboru
Jessica Brown
9
PS ... jeśli chcesz, aby pole wyboru było w stanie zaznaczonym, musisz dodać checked="checked", a nie zadzierać z javascript. Javascript jest po to, aby wymusić ignorowanie kliknięć myszą na obiekcie wejściowym, a nie ustawianie stanu pola wyboru.
Jessica Brown,
8
W tym przypadku nie ma wizualnego wskazania stanu r / o.
Jesse Glick
11
Zapobiega jednak używaniu TAB do przechodzenia do następnego wejścia.
user327961,
7
Nie działa całkowicie, jeśli javascript jest wyłączony!
Doin
419

READONLYnie działa na wyboru, gdyż uniemożliwia edycji pola za wartość , ale z wyboru masz faktycznie edycję pola w stan (na || off)

Od faqs.org :

Ważne jest, aby zrozumieć, że ODCZYTOWO po prostu uniemożliwia użytkownikowi zmianę wartości pola, a nie interakcję z polem. Na przykład w polach wyboru można je włączyć lub wyłączyć (ustawiając w ten sposób stan SPRAWDZONY), ale nie zmienia się wartości pola.

Jeśli nie chcesz używać, disabledale nadal chcesz przesłać wartość, co powiesz na przesłanie wartości jako ukrytego pola i po prostu wydrukowanie jej zawartości, gdy użytkownik nie spełni kryteriów edycji? na przykład

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}
ConroyP
źródło
135
Działa, ale jest trochę… brudne, tylko na polach wyboru powinno po prostu robić to, co podpowiada intuicja.
levhita
8
Intuicja oszukuje nas, jak wyjaśnił ConroyP.
ANeves
120
Intuicja nie oszuka nas, oszukała tych, którzy zaimplementowali pole wyboru w ten sposób.
Califf
@ConroyP -> „zapobiega edytowaniu wartości pola, ale za pomocą pola wyboru faktycznie edytujesz stan pola (on || off)”. To naprawdę słabe uzasadnienie dla decyzji opartej na kościach. „Stan” i „wartość” są, dla większości z nas, bardzo podobne do „toMAYto” i „toMAHto”, jak widać po pozytywnych opiniach ludzi, którzy się nie zgadzają.
McAuley,
343

To pole wyboru nie można zmienić:

<input type="checkbox" disabled="disabled" checked="checked">

Po prostu dodaj disabled="disabled"jako atrybut.


Edytuj, aby uwzględnić komentarze:

Jeśli chcesz, aby dane zostały przesłane z powrotem, prostym rozwiązaniem jest zastosowanie tej samej nazwy do ukrytego wejścia:

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

W ten sposób, gdy pole wyboru jest ustawione na „wyłączone”, służy jedynie do wizualnej reprezentacji danych, zamiast być „połączonym” z danymi. W odpowiedzi z powrotem wartość ukrytego wejścia jest wysyłana, gdy pole wyboru jest wyłączone.

Silvermind
źródło
331
Należy pamiętać, że pole wyboru „wyłączone” nie wysyła wartości przez dane POST.
biphobe
66
@powtac Nie adresujesz, że chce, aby dane zostały opublikowane, twój przykład tego nie robi.
David Mårtensson
70
Nie ma mowy, żeby ta odpowiedź miała 105 głosów pozytywnych. Jest to sprzeczne ze wszystkimi stanami PO.
JM4
15
@nathanhayfield: zgodnie z tą logiką powinienem być w stanie udzielać pomocnych odpowiedzi na każdy temat i uzyskiwać pozytywne opinie. :(
Michael Bray
24
@MichaelBray Zgaduję, że dostaje to wiele pozytywnych opinii, ponieważ wiele osób chce wiedzieć, jak robić pola wyboru tylko do odczytu, więc robią to: 1) Google „Pole wyboru tylko do odczytu”. 2) Sprawdź, czy tytuł tego pytania odpowiada temu, co chcą zrobić, i kliknij je. 3) Przewiń w dół, aż znajdą odpowiedź. 4) Szczęście i entuzjazm.
Mark Byers
63
<input type="checkbox" onclick="this.checked=!this.checked;">

Ale absolutnie MUSISZ zweryfikować dane na serwerze, aby upewnić się, że nie zostały zmienione.

Grant Wagner
źródło
4
Uważam, że jest to najlepsze rozwiązanie; plus, mogę wywołać inny fragment kodu (powiedzmy trochę jquery-rzeczy), aby wyświetlić ładny mały znak, który mówi „nie możesz tego zmienić, dopóki nie zrobisz x”. Więc coś w stylu: "... onclick = 'this.checked =! This.checked; javascript: theCheckboxWasClicked ();' ..."
Bane
Nie
wyszarza
To jest trochę hackish, ale to genialny, idealny, prawie elegancki mały hack.
russell
Najlepsze rozwiązanie Należy zaznaczyć jako poprawną odpowiedź.
Scottie
3
Jak wspomniano powyżej, nie działa to po podwójnym kliknięciu w IE. Użyłem: onchange = "this.checked = true;"
Ritikesh
57

inne „proste rozwiązanie”:

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = „disabled” / disabled = true

summsel
źródło
1
To rozwiązuje wszystkie problemy: tworzy pole wyboru tylko do odczytu, przesyła dane POST i zapewnia wizualne wskazanie tylko do odczytu (w przeciwieństwie do wszystkich rozwiązań javascript)
Dalibor Frivaldsky
2
możesz również porzucić namei valueatrybuty ze swojego fikcyjnego pudełka, ="checked"a także atrybuty ="diabled"-wartości mogą zostać porzucone. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org
Co najważniejsze, to rozwiązanie to zwykły stary HTML i nie opiera się na JavaScript.
GlennG,
45

Jest to nieco problem z użytecznością.

Jeśli chcesz wyświetlić pole wyboru, ale nie pozwolić na interakcję, dlaczego nawet pole wyboru?

Jednak moim podejściem byłoby użycie opcji wyłączone (użytkownik spodziewa się, że wyłączone pole wyboru nie będzie edytowalne, zamiast używania JS do włączenia włączonej niedziałającej) i dodanie modułu obsługi przesyłania formularzy za pomocą javascript, który włącza pola wyboru tuż przed przesłaniem formularza przesłane. W ten sposób opublikujesz swoje wartości.

tj. coś takiego:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}
FlySwat
źródło
22
Inną opcją jest wyświetlenie wyłączonego pola wyboru (lub obrazu lub czegokolwiek oznaczającego zaznaczone / niezaznaczone) i mieć ukryte dane wejściowe przetwarzane przez serwer.
Juan Mendes
5
Nie jest to problem z użytecznością, gdy masz formularz, w którym niektóre z twoich decyzji wpływają na inne dane wejściowe (aka: ustawienie wartości, której nie można dotknąć, jeśli nie cofniesz pierwszej akcji). Nienawidzę, gdy ludzie próbują zmienić zdanie ludzi zamiast odpowiadać (nie chodzi o ciebie @FlySwat, odpowiedziałeś).
Pherrymason
7
Celem jest użycie pola wyboru jako pola wyświetlania „ta wartość jest prawdziwa”, co jest łatwiejsze do zeskanowania w dół tabeli niż kilka „prawdziwych” / „fałszywych” -s. Jasne, możesz użyć ikony, ale w formularzu wydają się tam pola wyboru, gotowe do użycia.
Olie,
1
Zazwyczaj używam tego rozwiązania, ale .. czasami użytkownicy, szczególnie przy wolnym połączeniu, widzą przyciski wprowadzania włączone po przesłaniu formularza i decydują się na zabawę.
systempuntoout
2
Załóżmy, że masz szereg „funkcji”, które można włączyć lub nie, więc masz szablon, który pokazuje pole wyboru na tej funkcji. Ale czasami funkcja jest warunkiem wstępnym do czegoś innego ... więc MUSI być uwzględniona, ale nie chcesz zmieniać szablonu. Właśnie do tego służy pole wyboru wyłączone / zaznaczone. Są już od zawsze, więc mam nadzieję, że pytanie „dlaczego nawet pole wyboru” było retoryczne.
Triynko
38
<input type="checkbox" readonly="readonly" name="..." />

z jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

dobrym pomysłem może być podanie wizualnej wskazówki (css, tekst, ...), że kontrolka nie zaakceptuje danych wejściowych.

Jan
źródło
Nie działało to w ie6, filtr atrybutów tylko do odczytu nie działa poprawnie. Wyjąłem to z filtra i umieściłem sprawdzanie atrybutów w treści funkcji i działa dobrze w ie6.
gt124
3
Użyłem „data-readonly = true” zamiast standardowego atrybutu i działa dobrze we wszystkich przeglądarkach. Podoba mi się to rozwiązanie bardziej niż inne powyżej +1
peipst9lker
1
Selektor powinien polegać $(':checkbox[readonly]')na zaznaczeniu wszystkich pól wyboru kandydata, ponieważ readonlywartość atrybutu jest opcjonalna.
Izhar Aazmi
21

Użyłem tego, aby osiągnąć wyniki:

<input type=checkbox onclick="return false;" onkeydown="return false;" />
Osama Javed
źródło
W moim przypadku działa to bez średnika, inaczej nie.
Mwiza,
12

Zauważyłem rozwiązanie podane poniżej. Znalazłem to moje badania dotyczące tego samego problemu. Nie wiem, kto to opublikował, ale nie został stworzony przeze mnie. Wykorzystuje jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

To sprawiłoby, że pola wyboru byłyby tylko do odczytu, co byłoby pomocne w wyświetlaniu klientowi danych tylko do odczytu.

Rachunek Gotham
źródło
1
Pytanie wymaga pola wyboru tylko do odczytu, a nie wyłączonego. To jest najbardziej poprawna odpowiedź.
NileshChauhan
9
onclick="javascript: return false;"
Sandman
źródło
Hmmm ... to działa w przypadku fałszywej / niezaznaczonej sprawy, ale onclick="javascript: return true;"po prostu sprawia, że ​​działa jak normalne pole wyboru. Poradnik? Dzięki!
Olie,
@Olie, dodaj checkedatrybut i utrzymuj falsena miejscu.
Qwertiy
7

Spóźniona odpowiedź, ale większość odpowiedzi wydaje się zbyt skomplikowana.

Jak rozumiem, OP zasadniczo chciał:

  1. Tylko do odczytu, aby pokazać status.
  2. Wartość zwrócona z formularzem.

Należy zauważyć że:

  1. OP wolał nie używać tego disabledatrybutu, ponieważ „chce, aby zaznaczone pola wyboru były przesyłane wraz z resztą formularza”.
  2. Niezaznaczone pola wyboru nie są przesyłane z formularzem, ponieważ cytat z PO w 1. powyżej wskazuje, że już wiedział. Zasadniczo wartość pola wyboru istnieje tylko wtedy, gdy jest zaznaczone.
  3. Wyłączone pole wyboru wyraźnie wskazuje, że nie można go zmienić zgodnie z projektem, więc jest mało prawdopodobne, aby użytkownik próbował go zmienić.
  4. Wartość pola wyboru nie ogranicza się do wskazania jego statusu, takiego jak yeslub false, ale może być dowolnym tekstem.

Dlatego, ponieważ readonlyatrybut nie działa, najlepszym rozwiązaniem, niewymagającym javascript, jest:

  1. Wyłączone pole wyboru, bez nazwy ani wartości.
  2. Jeśli pole wyboru ma być wyświetlane jako zaznaczone, ukryte pole z nazwą i wartością przechowywaną na serwerze.

Tak więc dla zaznaczonego pola wyboru:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

W przypadku niezaznaczonego pola wyboru:

<input type="checkbox" disabled="disabled" />

Głównym problemem związanym z wyłączonymi wejściami, zwłaszcza polami wyboru, jest ich słaby kontrast, co może być problemem dla niektórych osób z pewnymi zaburzeniami widzenia. Lepiej wskazać wartość zwykłymi słowami, takimi jak Status: nonelub Status: implemented, ale włączając ukryte dane wejściowe powyżej, gdy używane są te ostatnie, takie jak:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Patanjali
źródło
7

Większość obecnych odpowiedzi ma jeden lub więcej z następujących problemów:

  1. Sprawdź tylko, czy mysz, a nie klawiatura.
  2. Sprawdź tylko przy ładowaniu strony.
  3. Zaakceptuj zawsze popularną zmianę lub prześlij wydarzenia, które nie zawsze się sprawdzą, jeśli coś innego je uzależni.
  4. Wymagaj ukrytych danych wejściowych lub innych specjalnych elementów / atrybutów, które musisz cofnąć, aby ponownie włączyć pole wyboru za pomocą javascript.

Poniższe jest proste i nie ma żadnego z tych problemów.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Jeśli pole wyboru jest tylko do odczytu, nie zmieni się. Jeśli nie, to zrobi to. Używa jquery, ale prawdopodobnie już tego używasz ...

To działa.

little_birdie
źródło
6
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
pollodiablo
źródło
6

Jeśli chcesz, aby były przesyłane do serwera za pomocą formularza, ale nie będą interakcyjne dla użytkownika, możesz użyć pointer-events: nonew css ( działa we wszystkich nowoczesnych przeglądarkach oprócz IE10- i Opera 12- ) i ustawić indeks tabulatorów,  -1aby zapobiec zmianie za pomocą klawiatury. Pamiętaj też, że nie możesz użyć labeltagu, ponieważ kliknięcie go i tak zmieni stan.

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

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}
<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

Qwertiy
źródło
Pozwól, że powtórzę twoje ostatnie zdanie (spóźniłem się i straciłem cenny czas): twoja technika jest bezużyteczna, jeśli istnieje <label> (w Firefox działa idealnie idealnie. Problem dotyczy Chrome).
Niccolo M.
@NiccoloM., Ale jeśli wiesz, że jest tylko do odczytu, po co owijać w etykietę? Możesz także umieścić po nim etykietę i użyć foratrybutu. W takim przypadku możesz użyć input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
Qwertiy
@KevinBui, czy usunąłeś labeli dodałeś tabindex? Jak ustawić fokus na nieusuwalnym elemencie, aby nacisnąć na niego spację?
Qwertiy
5

<input type="checkbox" onclick="return false" /> będzie działać dla ciebie, używam tego

Rinto George
źródło
5

Niektóre odpowiedzi tutaj wydają się nieco ronda, ale oto mały hack.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>

następnie w jquery możesz wybrać jedną z dwóch opcji:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

W pobliżu

demo: http://jsfiddle.net/5WFYt/

sksallaj
źródło
3
A to nie jest „rondo”?
KoZm0kNoT
nie, to całkiem bezpośrednie ... po prostu nie jest zwięzłe.
sksallaj
4

Opierając się na powyższych odpowiedziach, jeśli używasz jQuery, może to być dobre rozwiązanie dla wszystkich danych wejściowych:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Używam tego z Asp.Net MVC, aby ustawić niektóre elementy formularza tylko do odczytu. Powyższe działa w przypadku pól tekstowych i pól wyboru, ustawiając dowolny kontener nadrzędny jako .readonly, na przykład następujące scenariusze:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
Derrick
źródło
4
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
frag
źródło
4

Wiem, że „wyłączone” nie jest akceptowalną odpowiedzią, ponieważ operacja chce, żeby to opublikował. Jednak zawsze będziesz musiał zweryfikować wartości NAWET serwera, jeśli masz ustawioną opcję tylko do odczytu. Wynika to z faktu, że nie można powstrzymać złośliwego użytkownika przed publikowaniem wartości przy użyciu atrybutu tylko do odczytu.

Sugeruję zapisanie oryginalnej wartości (po stronie serwera) i ustawienie jej na wyłączone. Następnie, gdy prześlą formularz, zignoruj ​​wszystkie opublikowane wartości i weź oryginalne zapisane wartości.

Będzie wyglądał i zachowywał się, jakby to była wartość tylko do odczytu. I obsługuje (ignoruje) posty od złośliwych użytkowników. Zabijasz 2 ptaki jednym kamieniem.

NL3294
źródło
3

Skomentowałbym odpowiedź ConroyP, ale to wymaga 50 reputacji, których nie mam. Mam wystarczającą reputację, aby opublikować kolejną odpowiedź. Przepraszam.

Problem z odpowiedzią ConroyP polega na tym, że pole wyboru staje się niezmienne, nawet jeśli nie jest umieszczone na stronie. Chociaż Electrons_Ahoy nie określa tak wiele, najlepszą odpowiedzią byłaby odpowiedź, w której niezmienne pole wyboru wyglądałoby podobnie, jeśli nie to samo, co zmienne pole wyboru, jak w przypadku zastosowania atrybutu „wyłączony”. Rozwiązanie, które odnosi się do dwóch powodów Electrons_Ahoy daje za nie chcąc użyć „wyłączone” atrybut by nie muszą być nieprawidłowy, ponieważ wykorzystał „wyłączone” atrybut.

Załóżmy dwie zmienne logiczne, $ sprawdzone i $ wyłączone:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

Pole wyboru jest wyświetlane jako zaznaczone, jeśli $ sprawdzone jest prawdziwe. Pole wyboru jest wyświetlane jako niezaznaczone, jeśli $ zaznaczone jest fałszem. Użytkownik może zmienić stan pola wyboru, jeśli i tylko jeśli $ disabled jest fałszywe. Parametr „moja_nazwa” nie jest wysyłany, gdy pole wyboru nie jest zaznaczone przez użytkownika, czy nie. Parametr „moja_nazwa = 1” jest wysyłany, gdy pole wyboru jest zaznaczone przez użytkownika, czy nie. Myślę, że tego właśnie szukał Electrons_Ahoy.

rev. David N. Jafferian
źródło
3

Nie, pola wyboru danych wejściowych nie można odczytać tylko.

Ale możesz zrobić je tylko do odczytu za pomocą javascript!

Dodaj ten kod w dowolnym miejscu i czasie, aby pola wyboru działały tylko zgodnie z założeniami, uniemożliwiając użytkownikowi modyfikowanie go w jakikolwiek sposób.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Możesz dodać ten skrypt w dowolnym momencie po załadowaniu jQuery.

Będzie działać dla dynamicznie dodawanych elementów.

Działa poprzez pobranie zdarzenia kliknięcia (które następuje przed zdarzeniem zmiany) w dowolnym elemencie na stronie, a następnie sprawdza, czy ten element jest polem wyboru tylko do odczytu, a jeśli tak, to blokuje zmianę.

Jest tak wiele ifs, aby nie wpływać na wydajność strony.

Timo Huovinen
źródło
3

Wystarczy użyć prostego wyłączonego tagu, jak poniżej.

<input type="checkbox" name="email"  disabled>
Nirbhay Rana
źródło
6
„Wyłączony tag” nie prześle tych danych
Przemysław Kaczmarczyk
2

Jeśli chcesz, aby WSZYSTKIE pola wyboru były „zablokowane”, aby użytkownik nie mógł zmienić stanu „zaznaczone”, jeśli obecny jest atrybut „tylko do odczytu”, możesz użyć jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Fajną rzeczą w tym kodzie jest to, że pozwala on zmieniać atrybut „tylko do odczytu” w całym kodzie bez konieczności ponownego wiązania każdego pola wyboru.

Działa również z przyciskami radiowymi.

Daniel Ribeiro
źródło
1

Głównym powodem, dla którego ludzie chcieliby mieć pole wyboru tylko do odczytu i (a także) grupę radiową tylko do odczytu, jest to, że informacje, których nie można zmienić, mogą zostać przedstawione użytkownikowi w postaci, w jakiej zostały wprowadzone.

OK wyłączone to zrobi - niestety wyłączone elementy sterujące nie są obsługiwane za pomocą klawiatury i dlatego są niezgodne z wszelkimi przepisami dotyczącymi dostępności. To jest NAJWIĘKSZE zawieszenie w HTML, które znam.

Tim
źródło
1

Wkład bardzo późno ... ale w każdym razie. Podczas ładowania strony użyj jquery, aby wyłączyć wszystkie pola wyboru oprócz aktualnie wybranego. Następnie ustaw aktualnie wybrany jako tylko do odczytu, aby wyglądał podobnie do wyłączonych. Użytkownik nie może zmienić wartości, a wybrana wartość wciąż się przesyła.

Jason
źródło
1

Bardzo późno na imprezę, ale znalazłem odpowiedź dla MVC (5), wyłączyłem CheckBox i dodałem HiddenFor PRZED polem wyboru, więc kiedy pisze, jeśli najpierw znajdzie Ukryte pole i użyje tej wartości. To działa.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>
kręgielnia
źródło
1

Użyłbym atrybutu tylko do odczytu

<input type="checkbox" readonly>

Następnie użyj CSS, aby wyłączyć interakcje:

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

Zauważ, że użycie pseudoklasy: tylko do odczytu nie działa tutaj.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}
Gordie
źródło
0

Po prostu nie chcę, aby klient mógł je zmienić w określonych okolicznościach.

GOTOWOŚĆ sama w sobie nie będzie działać. Możesz być w stanie zrobić coś funky w / CSS, ale zwykle po prostu wyłączamy je.

OSTRZEŻENIE: Jeśli zostaną wysłane, klient może je zmienić, kropka. Nie możesz polegać na readonly, aby uniemożliwić użytkownikowi zmianę treści. Zawsze można użyć skrzypka lub po prostu zmienić html w / firebug lub coś takiego.

Walden Leverich
źródło
Masz całkowitą rację, dlatego sprawdzam to również po stronie serwera, ustawienie to ma na celu poprawę komfortu użytkowania po stronie klienta.
levhita,
0

Moje rozwiązanie jest w rzeczywistości przeciwieństwem rozwiązania FlySwat, ale nie jestem pewien, czy zadziała w twojej sytuacji. Mam grupę pól wyboru, a każde z nich ma moduł obsługi onClick, który przesyła formularz (służą do zmiany ustawień filtrów dla tabeli). Nie chcę zezwalać na wiele kliknięć, ponieważ kolejne kliknięcia po pierwszym są ignorowane. Dlatego wyłączam wszystkie pola wyboru po pierwszym kliknięciu i po przesłaniu formularza:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Pola wyboru znajdują się w elemencie span o identyfikatorze „filtrów” - druga część kodu to instrukcja jQuery, która iteruje przez pola wyboru i wyłącza każde z nich. W ten sposób wartości pól wyboru są nadal przesyłane za pośrednictwem formularza (ponieważ formularz został przesłany przed ich wyłączeniem), co uniemożliwia użytkownikowi ich zmianę do czasu ponownego załadowania strony.

sk.
źródło