Bisakah kotak centang HTML disetel menjadi hanya baca?

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.

Anda bisa menggunakan ini:

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

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

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

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.

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

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

"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

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

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

Saya menggunakan ini untuk mencapai hasil:

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

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.

onclick="javascript: return false;"

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>

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.

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

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>

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

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/

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>

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

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.

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.

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.

Cukup gunakan tag sederhana yang dinonaktifkan seperti ini di bawah ini.

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

ide alternatifnya adalah menggunakan overlay dan menutupi input yang hanya bisa dibaca

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

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.

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.

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.

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>

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

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.

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.