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

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.

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.

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

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.

<input type="checkbox" onclick="this.checked=!this.checked;">

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

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

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

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

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

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

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.

onclick="javascript: return false;"

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>

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.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

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>

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

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/

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>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

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.

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.

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.

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

<input type="checkbox" name="email"  disabled>

alternatywnym pomysłem jest użycie nakładki i zatuszowanie tylko do odczytu danych wejściowych

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

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.

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.

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.

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>

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

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.

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.