Bisakah kotak centang HTML disetel menjadi hanya baca?


818

Saya pikir mereka bisa saja, tetapi karena saya tidak meletakkan uang saya di mana mulut saya (untuk berbicara) mengatur atribut readonly tampaknya tidak melakukan apa-apa.

Saya lebih suka tidak menggunakan Dinonaktifkan, karena saya ingin kotak centang yang dicentang dikirimkan dengan sisa formulir, saya hanya tidak ingin klien dapat mengubahnya dalam keadaan tertentu.


39
Klien (jahat) selalu dapat mengubah nilai kotak centang (atau mengirim permintaan sewenang-wenang). Selalu pastikan Anda melakukan validasi sisi server yang tepat!
knittl

4
@knittl Tapi vistor normal tidak memiliki klien (jahat). Dan Vistor yang normal tidak ingin mengubah informasi (Itulah arti dari readonly)
Christian Gollhardt

3
@knittl Anda tampaknya mengabaikan seluruh pengertian readonly! Mengapa atribut ini ada?
Izhar Aazmi

10
@IzharAazmi: readonlyhanya atribut sisi klien untuk membantu peramban merender situs dengan benar dan kemudian membuat permintaan yang benar darinya. Server tidak bisa dan tidak boleh tahu tentang readonlyatribut halaman yang diberikan. Itu harus mengasumsikan permintaan datang dari mana saja (dan mungkin dengan niat jahat); jangan pernah mengandalkan input yang disediakan pengguna. Namun, mengapa mengirim nilai kotak centang yang tidak dapat Anda edit dalam permintaan (jika Anda menetapkan nilai sebelum rendering, Anda sudah tahu nilai ketika permintaan dikirimkan, jadi tidak perlu mengirimkannya dalam permintaan)
knittl

4
@ Knittl Saya setuju! Tetapi Anda melihat readonlyatribut ada di sana karena beberapa alasan. Ini tentu saja tidak ada hubungannya dengan implementasi sisi server. Tapi itu ada untuk memberi tahu pengguna "Hei! Nilai ini diasumsikan di sini, dan / tetapi Anda tidak dapat mengubah ini."
Izhar Aazmi

Jawaban:


538

Anda bisa menggunakan ini:

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

Ini berfungsi karena mengembalikan false dari peristiwa klik menghentikan rantai eksekusi berlanjut.


29
Mengembalikan false dalam javascript mencegah melanjutkan rantai eksekusi untuk klik atau penangan kunci. Tidak ada hubungannya dengan keadaan kotak centang
Jessica Brown

9
PS ... jika Anda ingin kotak centang berada dalam keadaan dicentang yang perlu Anda tambahkan checked="checked", jangan main-main dengan javascript. Javascript hanya ada di sana untuk memaksa klik mouse diabaikan pada objek input, bukan untuk mengatur keadaan kotak centang.
Jessica Brown

8
Tidak ada indikasi visual status r / o dalam kasus ini.
Jesse Glick

11
Mencegah penggunaan TAB untuk menavigasi ke input berikutnya.
user327961

7
Gagal sepenuhnya jika javascript dinonaktifkan!
Lakukan

420

READONLYtidak bekerja pada checkbox karena mencegah Anda dari mengedit lapangan nilai , tapi dengan checkbox Anda benar-benar mengedit bidang ini negara (on off ||)

Dari faqs.org :

Penting untuk dipahami bahwa READONLY hanya mencegah pengguna mengubah nilai bidang, bukan dari berinteraksi dengan bidang. Di kotak centang, misalnya, Anda bisa mengaktifkan atau menonaktifkannya (dengan demikian mengatur status CHECKED) tetapi Anda tidak mengubah nilai bidang.

Jika Anda tidak ingin menggunakan disabledtetapi masih ingin mengirimkan nilai, bagaimana dengan mengirimkan nilai sebagai bidang tersembunyi dan hanya mencetak kontennya kepada pengguna ketika mereka tidak memenuhi kriteria edit? misalnya

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

135
Berfungsi, tapi agak .. kotor sekali, hanya baca di kotak centang harus melakukan apa yang dikatakan intuisi.
levhita

8
Intuisi membodohi kita, seperti yang dijelaskan ConroyP.
ANeves

120
Intuisi tidak membodohi AS, itu menipu orang-orang yang menerapkan kotak centang dengan cara ini.
Califf

@ConroyP -> "itu mencegah Anda mengedit nilai bidang, tetapi dengan kotak centang Anda benar-benar mengedit keadaan bidang (on || off)". Itu pembenaran yang benar-benar lemah untuk keputusan bodoh. 'Keadaan' dan 'nilai' bagi kebanyakan dari kita, sama dengan 'toMAYto' dan 'toMAHto', seperti yang dapat Anda lihat dari peningkatan yang dilakukan oleh orang-orang yang tidak setuju.
McAuley

343

Ini adalah kotak centang yang tidak dapat Anda ubah:

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

Cukup tambahkan disabled="disabled"sebagai atribut.


Edit untuk menanggapi komentar:

Jika Anda ingin data diposkan kembali, solusi sederhana adalah dengan menerapkan nama yang sama ke input tersembunyi:

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

Dengan cara ini, ketika kotak centang diatur ke 'dinonaktifkan', itu hanya melayani tujuan representasi visual dari data, bukannya benar-benar 'ditautkan' ke data. Di pos kembali, nilai input tersembunyi dikirim ketika kotak centang dinonaktifkan.


331
Perhatikan bahwa kotak centang "dinonaktifkan" tidak mengirim nilai melalui data POST.
biphobe

66
@ Powow Anda gagal mengatasi bahwa dia ingin data diposting, contoh Anda tidak melakukannya.
David Mårtensson

70
Tidak mungkin jawaban ini memiliki 105 upvotes. Itu bertentangan dengan semua yang dinyatakan OP.
JM4

15
@nathanhayfield: dengan logika itu, saya harus dapat memposting jawaban yang bermanfaat tentang topik apa pun dan mendapatkan upvotes. :(
Michael Bray

24
@MichaelBray Saya menduga ini mendapat banyak upvotes karena banyak orang ingin tahu cara membuat checkbox hanya jadi mereka melakukan ini: 1) Google "Checkbox readonly". 2) Lihat bahwa judul pertanyaan ini sesuai dengan yang ingin mereka lakukan dan klik. 3) Gulir ke bawah sampai mereka menemukan jawaban ini. 4) Kebahagiaan dan keterbukaan.
Mark Byers

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

Tetapi Anda benar-benar HARUS memvalidasi data di server untuk memastikan itu tidak berubah.


4
Saya menemukan ini menjadi solusi terbaik; ditambah, saya dapat memanggil potongan kode lain (katakanlah, beberapa barang jquery) untuk menampilkan tanda kecil yang bagus yang mengatakan "Anda tidak dapat mengubah ini sampai Anda pertama kali melakukan x". Jadi sesuatu seperti: "... onclick = 'this.checked =! This.checked; javascript: theCheckboxWasClicked ();' ..."
Bane

Ini tidak abu-abu kotak seperti dengan jawaban dari powtac sehingga mendapat suara saya
EHarpham

Ini sedikit retas, tetapi ini adalah retasan kecil yang cerdik, sempurna, dan hampir elegan.
russell

Solusi terbaik. Harus ditandai sebagai jawaban yang benar.
Scottie

3
Seperti yang dinyatakan di atas, ini tidak berfungsi pada mengklik ganda di IE. Saya menggunakan: onchange = "this.checked = true;"
Ritikesh

57

"solusi sederhana" lainnya:

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

Disable = "Disable" / Disable = true


1
Ini menyelesaikan semua masalah: membuat kotak centang hanya-baca, mengirimkan data POST dan memberikan indikasi visual tentang hanya-baca-ness (berbeda dengan semua solusi javascript)
Dalibor Frivaldsky

2
Anda juga bisa drop-off namedan valueatribut dari kotak dummy Anda, juga ="checked"dan ="diabled"nilai attrib bisa diturunkan. w3.org/TR/html-markup/input.checkbox.html
Sampo Sarrala - codidact.org

Yang terpenting, solusi ini adalah HTML lama dan tidak bergantung pada Javascript.
GlennG

45

Ini menyajikan sedikit masalah kegunaan.

Jika Anda ingin menampilkan kotak centang, tetapi tidak membiarkannya berinteraksi, mengapa bahkan kotak centang itu?

Namun, pendekatan saya adalah menggunakan dinonaktifkan (Pengguna mengharapkan kotak centang dinonaktifkan tidak dapat diedit, alih-alih menggunakan JS untuk membuat yang diaktifkan tidak berfungsi), dan menambahkan formulir kirim penangan tangan menggunakan javascript yang memungkinkan kotak centang tepat sebelum formulir dikirimkan. Dengan cara ini Anda mendapatkan nilai-nilai Anda diposting.

yaitu sesuatu seperti ini:

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

22
Pilihan lain adalah untuk menampilkan kotak centang yang dinonaktifkan (atau gambar atau apa pun untuk menunjukkan dicentang / tidak dicentang) dan memiliki input tersembunyi yang diproses oleh server.
Juan Mendes

5
Ini bukan masalah kegunaan ketika Anda mendapatkan formulir di mana beberapa keputusan Anda memengaruhi beberapa input lainnya (alias: menetapkan nilai yang tidak dapat disentuh jika Anda tidak membatalkan tindakan pertama Anda.). Saya benci ketika orang mencoba mengubah pikiran orang alih-alih menjawab (ini bukan tentang Anda @FlySwat, Anda menjawab).
Pherrymason

7
Tujuannya adalah untuk menggunakan kotak centang sebagai bidang tampilan "nilai ini benar", yang lebih mudah untuk memindai tabel daripada sekelompok "benar" / "salah" -s. Tentu, Anda bisa menggunakan ikon tetapi, dalam formulir, kotak centang tampak ada, matang untuk digunakan.
Olie

1
Saya biasanya menggunakan solusi ini tapi .. kadang-kadang pengguna, terutama pada koneksi yang lambat, melihat tombol input diaktifkan setelah pengiriman formulir dan memutuskan untuk bermain dengannya.
systempuntoout

2
Misalkan Anda memiliki serangkaian "fitur" yang dapat dimasukkan atau tidak, jadi Anda memiliki templat yang memperlihatkan kotak centang pada fitur tersebut. Tetapi kadang-kadang, fitur adalah prasyarat untuk sesuatu yang lain ... jadi HARUS disertakan, tetapi Anda tidak ingin mengubah template Anda. Itulah tepatnya kotak centang yang dinonaktifkan / dicentang. Mereka sudah ada selamanya, jadi saya berharap pertanyaan "mengapa bahkan kotak centang" adalah retoris.
Triynko

38
<input type="checkbox" readonly="readonly" name="..." />

dengan jquery:

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

mungkin masih merupakan ide yang baik untuk memberikan beberapa petunjuk visual (css, teks, ...), bahwa kontrol tidak akan menerima input.


Ini tidak bekerja di ie6 bagi saya, filter atribut readonly tidak berfungsi dengan benar. Saya mengambil itu dari filter dan meletakkan pemeriksaan atribut di tubuh fungsi dan berfungsi dengan baik di ie6.
gt124

3
Saya menggunakan "data-readonly = true" alih-alih atribut standar dan berfungsi baik di semua browser. Saya suka solusi ini lebih dari yang lain di atas +1
peipst9lker

1
Pemilih harus $(':checkbox[readonly]')memilih semua kotak centang kandidat karena nilai readonlyatribut bersifat opsional.
Izhar Aazmi

21

Saya menggunakan ini untuk mencapai hasil:

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

Dalam kasus saya ini berfungsi tanpa titik koma, kalau tidak, tidak.
Mwiza

12

Saya kebetulan memperhatikan solusi yang diberikan di bawah ini. Di menemukannya penelitian saya untuk masalah yang sama. Saya tidak yang mempostingnya tetapi itu bukan buatan saya. Ini menggunakan jQuery:

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

Ini akan membuat kotak centang hanya baca yang akan membantu untuk menampilkan data yang hanya dibaca kepada klien.


1
Pertanyaannya meminta kotak centang hanya baca dan bukan yang dinonaktifkan. Jadi ini jawaban yang paling benar.
NileshChauhan

9
onclick="javascript: return false;"

Hmmm ... ini berfungsi untuk kasus yang salah / tidak dicentang, tetapi onclick="javascript: return true;"membuatnya berfungsi seperti kotak centang normal. Petunjuk? Terima kasih!
Olie

@ Olie, tambahkan checkedatribut dan tetap falsedi tempatnya.
Qwertiy

7

Jawaban yang terlambat, tetapi sebagian besar jawaban sepertinya terlalu memperumitnya.

Seperti yang saya pahami, OP pada dasarnya menginginkan:

  1. Kotak centang hanya baca untuk menampilkan status.
  2. Nilai dikembalikan dengan formulir.

Perlu dicatat bahwa:

  1. OP lebih suka untuk tidak menggunakan disabledatribut, karena mereka 'ingin kotak centang dicentangkan dengan sisa formulir'.
  2. Kotak centang yang tidak dicentang tidak dikirimkan dengan formulir, karena kutipan dari OP di 1. di atas menunjukkan mereka sudah tahu. Pada dasarnya, nilai kotak centang hanya ada jika dicentang.
  3. Kotak centang yang dinonaktifkan dengan jelas menunjukkan bahwa itu tidak dapat diubah, dengan desain, sehingga pengguna tidak mungkin mencoba mengubahnya.
  4. Nilai kotak centang tidak terbatas untuk menunjukkan statusnya, seperti yesatau false, tetapi dapat berupa teks apa pun.

Oleh karena itu, karena readonlyatribut tidak berfungsi, solusi terbaik, tanpa memerlukan javascript, adalah:

  1. Kotak centang yang dinonaktifkan, tanpa nama atau nilai.
  2. Jika kotak centang ditampilkan sebagai dicentang, bidang tersembunyi dengan nama dan nilai disimpan di server.

Jadi untuk kotak centang yang dicentang:

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

Untuk kotak centang yang tidak dicentang:

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

Masalah utama dengan input yang dinonaktifkan, terutama kotak centang, adalah kontrasnya yang buruk yang mungkin menjadi masalah bagi sebagian orang dengan cacat visual tertentu. Mungkin lebih baik untuk menunjukkan nilai dengan kata-kata sederhana, seperti Status: noneatau Status: implemented, tetapi termasuk input tersembunyi di atas ketika yang terakhir digunakan, seperti:

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


7

Sebagian besar jawaban saat ini memiliki satu atau lebih dari masalah ini:

  1. Hanya periksa apakah mouse bukan keyboard.
  2. Periksa hanya pada pemuatan halaman.
  3. Kaitkan perubahan yang selalu populer atau ajukan acara yang tidak akan selalu berhasil jika ada yang lain mengaitkannya.
  4. Membutuhkan input tersembunyi atau elemen / atribut khusus lain yang harus Anda batalkan untuk mengaktifkan kembali kotak centang menggunakan javascript.

Berikut ini sederhana dan tidak memiliki masalah tersebut.

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

Jika kotak centang hanya dibaca, itu tidak akan berubah. Jika tidak, itu akan terjadi. Itu memang menggunakan jquery, tapi Anda mungkin sudah menggunakannya ...

Berhasil.


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

6

Jika Anda ingin mereka dikirim ke server dengan formulir tetapi tidak menarik bagi pengguna, Anda dapat menggunakan pointer-events: nonecss ( berfungsi di semua browser modern kecuali IE10- dan Opera 12- ) dan mengatur indeks-tab  -1untuk mencegah perubahan melalui keyboard. Perhatikan juga bahwa Anda tidak dapat menggunakan labeltag karena mengkliknya akan mengubah keadaan.

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>


Biarkan saya ulangi kalimat terakhir Anda (saya melewatkannya dan membuang-buang waktu yang berharga): teknik Anda tidak berguna jika ada <label> (di Firefox itu berfungsi dengan baik, sebenarnya. Masalahnya adalah dengan Chrome).
Niccolo M.

@NiccoloM., Tetapi jika Anda tahu itu hanya bisa dibaca, mengapa harus membungkusnya ke dalam label? Anda juga dapat menempatkan label setelahnya dan menggunakan foratribut. Dalam hal ini Anda dapat menggunakan input[type="checkbox"][readonly] + label { pointer-events: none !important; }.
Qwertiy

@KevinBui, sudahkah Anda menghapus labeldan menambahkan tabindex? Bagaimana Anda mengatur fokus pada elemen yang tidak fokus untuk menekan spasi di atasnya?
Qwertiy

5

<input type="checkbox" onclick="return false" /> akan bekerja untuk Anda, saya menggunakan ini


5

Beberapa jawaban di sini sepertinya agak bundaran, tapi ini hack kecil.

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

lalu di jquery Anda dapat memilih satu dari dua opsi:

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

});

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


3
Dan ini bukan "bundaran" ??
KoZm0kNoT

nah itu cukup langsung .. hanya saja tidak singkat.
sksallaj

4

Membangun jawaban di atas, jika menggunakan jQuery, ini mungkin solusi yang baik untuk semua input:

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

Saya menggunakan ini dengan Asp.Net MVC untuk mengatur beberapa elemen formulir hanya baca. Di atas berfungsi untuk teks dan centang kotak dengan mengatur wadah induk apa pun sebagai .baca hanya seperti skenario berikut:

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

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

4

Saya tahu bahwa "dinonaktifkan" bukan jawaban yang dapat diterima, karena op ingin itu dikirim. Namun, Anda selalu harus memvalidasi nilai di sisi server BAHKAN jika Anda memiliki opsi readonly yang ditetapkan. Ini karena Anda tidak dapat menghentikan pengguna jahat dari memposting nilai menggunakan atribut readonly.

Saya sarankan menyimpan nilai asli (sisi server), dan mengaturnya untuk dinonaktifkan. Kemudian, ketika mereka mengirimkan formulir, abaikan semua nilai yang diposting dan ambil nilai asli yang Anda simpan.

Ini akan terlihat dan berperilaku seperti itu nilai hanya baca. Dan itu menangani (mengabaikan) posting dari pengguna jahat. Anda membunuh 2 burung dengan satu batu.


3

Saya akan mengomentari jawaban ConroyP, tetapi itu membutuhkan 50 reputasi yang tidak saya miliki. Saya punya cukup reputasi untuk mengirim jawaban lain. Maaf.

Masalah dengan jawaban ConroyP adalah bahwa kotak centang diberikan tidak dapat diubah dengan bahkan tidak memasukkannya pada halaman. Meskipun Electrons_Ahoy tidak menetapkan terlalu banyak, jawaban terbaik adalah jawaban di mana kotak centang yang tidak dapat diubah akan terlihat serupa, jika tidak sama dengan, kotak centang yang dapat diubah, seperti halnya ketika atribut "dinonaktifkan" diterapkan. Solusi yang membahas dua alasan yang diberikan Electrons_Ahoy karena tidak ingin menggunakan atribut "cacat" tidak serta merta tidak valid karena menggunakan atribut "dinonaktifkan".

Asumsikan dua variabel boolean, $ diperiksa dan $ dinonaktifkan:

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" ' : '', '/>';

Kotak centang ditampilkan sebagai dicentang jika $ dicentang benar. Kotak centang ditampilkan sebagai tidak dicentang jika $ diperiksa salah. Pengguna dapat mengubah status kotak centang jika dan hanya jika $ disable salah. Parameter "my_name" tidak diposting ketika kotak centang tidak dicentang, oleh pengguna atau tidak. Parameter "my_name = 1" diposting ketika kotak centang dicentang, oleh pengguna atau tidak. Saya percaya inilah yang dicari oleh Electrons_Ahoy.


3

Tidak, kotak centang input tidak dapat dibaca hanya.

Tapi Anda bisa membuatnya hanya dengan javascript!

Tambahkan kode ini di mana saja kapan saja untuk menjadikan kotak centang hanya berfungsi sebagaimana mestinya, dengan mencegah pengguna memodifikasinya dengan cara apa pun.

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>

Anda dapat menambahkan skrip ini kapan saja setelah jQuery dimuat.

Ini akan bekerja untuk elemen yang ditambahkan secara dinamis.

Ia bekerja dengan mengambil event klik (yang terjadi sebelum acara perubahan) pada elemen apa pun pada halaman, itu kemudian memeriksa apakah elemen ini adalah kotak centang hanya-baca, dan jika ya, maka ia memblokir perubahan.

Ada begitu banyak jika untuk membuatnya tidak mempengaruhi kinerja halaman.




2

Jika Anda ingin SEMUA kotak centang Anda menjadi "terkunci" sehingga pengguna tidak dapat mengubah status "dicentang" jika ada "readonly" attibute, maka Anda dapat menggunakan jQuery:

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

Hal yang paling keren dari kode ini adalah memungkinkan Anda untuk mengubah atribut "readonly" di seluruh kode Anda tanpa harus mem-rebind setiap kotak centang.

Ini berfungsi untuk tombol radio juga.


1

Alasan utama orang ingin kotak centang baca-saja dan (juga) grup radio baca-saja adalah agar informasi yang tidak dapat diubah dapat disajikan kembali kepada pengguna dalam bentuk yang dimasukkan.

OK dinonaktifkan akan melakukan ini - sayangnya kontrol yang dinonaktifkan tidak dapat dinavigasi keyboard dan karenanya melanggar semua undang-undang aksesibilitas. Ini adalah hangup TERBESAR dalam HTML yang saya tahu.


1

Berkontribusi sangat terlambat ... tapi bagaimanapun. Pada pemuatan halaman, gunakan jquery untuk menonaktifkan semua kotak centang kecuali yang dipilih saat ini. Kemudian atur yang saat ini dipilih sebagai hanya baca sehingga memiliki tampilan yang mirip dengan yang dinonaktifkan. Pengguna tidak dapat mengubah nilai, dan nilai yang dipilih masih mengirimkan.


1

Sangat terlambat ke pesta tetapi saya menemukan jawaban untuk MVC (5) Saya menonaktifkan kotak centang dan menambahkan HiddenFor SEBELUM kotak centang, jadi ketika memposting jika menemukan bidang Tersembunyi pertama dan menggunakan nilai itu. Ini berhasil.

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

1

Saya akan menggunakan atribut readonly

<input type="checkbox" readonly>

Kemudian gunakan CSS untuk menonaktifkan interaksi:

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

Perhatikan bahwa menggunakan pseudo-class: read-only tidak berfungsi di sini.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

0

Saya hanya tidak ingin klien dapat mengubahnya dalam keadaan tertentu.

SIAP itu sendiri tidak akan berhasil. Anda mungkin dapat melakukan sesuatu yang funky dengan CSS tetapi kami biasanya membuatnya dinonaktifkan.

PERINGATAN: Jika mereka diposting kembali maka klien dapat mengubahnya, titik. Anda tidak dapat mengandalkan readonly untuk mencegah pengguna mengubah sesuatu. Selalu bisa menggunakan fiddler atau hanya memotong html w / firebug atau semacamnya.


Anda sepenuhnya benar, itu sebabnya saya juga memeriksa di sisi server, pengaturan ini hanya untuk meningkatkan pengalaman pengguna di sisi klien.
levhita

0

Solusi saya sebenarnya kebalikan dari solusi FlySwat, tetapi saya tidak yakin apakah itu akan bekerja untuk situasi Anda. Saya memiliki sekelompok kotak centang, dan masing-masing memiliki penangan onClick yang mengirimkan formulir (mereka digunakan untuk mengubah pengaturan filter untuk tabel). Saya tidak ingin membolehkan banyak klik, karena klik selanjutnya setelah yang pertama diabaikan. Jadi saya menonaktifkan semua kotak centang setelah klik pertama, dan setelah mengirimkan formulir:

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

Kotak centang berada dalam elemen rentang dengan ID "filter" - bagian kedua dari kode adalah pernyataan jQuery yang diulang melalui kotak centang dan menonaktifkan masing-masing. Dengan cara ini, nilai-nilai kotak centang masih dikirimkan melalui formulir (karena formulir dikirimkan sebelum menonaktifkannya), dan itu mencegah pengguna dari mengubahnya sampai halaman memuat ulang.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.