Mengapa tombol radio tidak bisa "dibaca"?


214

Saya ingin menunjukkan tombol radio, minta nilainya disampaikan, tetapi tergantung pada keadaan, tidak boleh diedit. Dinonaktifkan tidak berfungsi, karena tidak mengirimkan nilai (atau bukan?), Dan mematikan tombol radio. Hanya baca adalah yang benar-benar saya cari, tetapi untuk beberapa alasan misterius itu tidak berfungsi.

Apakah ada beberapa trik aneh yang perlu saya tarik agar bisa dibaca-hanya agar berfungsi seperti yang diharapkan? Haruskah saya melakukannya dalam JavaScript saja?

Secara kebetulan, apakah ada yang tahu mengapa read-only tidak berfungsi di tombol radio, sementara itu bekerja di tag input lain? Apakah ini salah satu dari kelalaian yang tidak dapat dipahami dalam spesifikasi HTML?


5
"Apakah ini salah satu dari penghilangan yang tidak dapat dipahami dalam spesifikasi HTML?" Pikirkan itu dari sudut pandang pengguna. Mengapa menampilkan tombol yang tidak bisa mereka klik?
Paul D. Waite

67
Mengapa menampilkan tombol yang tidak bisa mereka klik? Karena saya ingin mereka tahu tombolnya ada di sana, tetapi saya tidak ingin mereka bisa mengkliknya sekarang. Tapi mungkin nanti. Bagaimanapun, ini adalah bentuk yang dinamis. Mengapa tombol radio berbeda dari bidang input lainnya?
mcv

7
Berikut specnya: w3.org/TR/html401/interact/forms.html#h-17.12.2 "Elemen-elemen berikut mendukung atribut readonly: INPUT dan TEXTAREA." Yang jelas salah. Namun, kembali ke sini, kami melihat ringkasan yang lebih akurat: w3.org/TR/WD-forms-970402 #readly "Langsung berlaku untuk elemen INPUT dari tipe TEXT atau PASSWORD dan ke elemen TEXTAREA." Sepertinya ini telah menyelinap di antara celah rec dan spesifikasi.
graphicdivine

Lebih penasaran lagi. Menurut dokumen kuno ini "Dalam kotak centang, misalnya, Anda dapat memeriksanya atau menonaktifkannya (dengan demikian mengatur negara yang DIPERIKSA) tetapi Anda tidak mengubah nilai bidang." ( htmlcodetutorial.com/forms/_INPUT_DISABLED.html ) Apakah ini benar? Apakah menyetel READONLY pada kotak centang / radio mengunci nilainya, meskipun pengguna tampaknya dapat mengubahnya?
graphicdivine

periksa posting saya [di sini] [1] memberikan solusi bersih sederhana untuk masalah ini [1]: stackoverflow.com/a/15513256/1861389
driven4ward

Jawaban:


149

Saya hanya memalsukan tombol radio dengan menonaktifkan hanya tombol radio yang tidak dicentang. Ini membuat pengguna tidak memilih nilai yang berbeda, dan nilai yang dicentang akan selalu dikirim pada saat pengiriman.

Menggunakan jQuery untuk membuat hanya baca:

$(':radio:not(:checked)').attr('disabled', true);

Pendekatan ini juga berfungsi untuk membuat daftar pilih dibaca hanya, kecuali bahwa Anda harus menonaktifkan setiap opsi yang tidak dipilih.


2
Terima kasih @Megan, ini adalah solusi hebat
Michael La Voie

9
Variasi untuk ini memungkinkan Anda menggunakan readonlyproperti, seperti yang diharapkan OP untuk berfungsi:$(':radio[readonly]:not(:checked)').attr('disabled', true);
wodow

1
Di antara solusi di bawah ini, solusi ini menyediakan kode terbersih, dan bekerja dengan baik dengan validator Jquery karena saya tidak perlu mengaktifkan / menonaktifkan bidang, atau menangani peristiwa klik yang tidak mengikat dan mengikat kembali ketika mengirimkan formulir.
Kristianne Nerona

Bekerja dengan akurat. Terima kasih
Hassan Farooq

Pintar! Menggunakan .not (..), jika Anda sudah memiliki satu set bidang input yang dipilih: var myRadios = $ ('# specific-radio'); myRadios.not (': checked'). prop ('dinonaktifkan', true); api.jquery.com/not
JoePC

207

Tombol radio hanya perlu dibaca-saja jika ada opsi lain. Jika Anda tidak memiliki opsi lain, tombol radio yang dicentang tidak dapat dicentang. Jika Anda memiliki opsi lain, Anda dapat mencegah pengguna mengubah nilai hanya dengan menonaktifkan opsi lain:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

Fiddle: http://jsfiddle.net/qqVGu/


3
Masalah dengan solusi pertama Anda adalah bahwa jika saya ingin mengaktifkan radiobutton melalui javascript, tiba-tiba saya memiliki dua bidang dengan nama yang sama, jadi saya harus membersihkan salah satunya. Atau gunakan yang tersembunyi secara nyata dan minta tombol radio atur saja nilai field yang tersembunyi. Eter cara, itu hanya sedikit lebih rumit daripada yang saya inginkan radiobutton menjadi. Solusi kedua Anda, meskipun saya tidak ragu itu berhasil, terdengar seperti retas yang sangat jelek. Jadi saya kira solusi javascript adalah satu-satunya yang memenuhi kriteria saya. Saya akan pergi dengan itu.
mcv

7
Solusi 1 tolong! Ini satu-satunya yang dapat diakses dengan baik. Dan jika Anda perlu menulis skrip, hanya satu baris lagi untuk mengatur kemampuan bidang tersembunyi ke kebalikan dari kemampuan radio.
bobince

5
Saya hanya memperhatikan bahwa solusi 2 dan 3 telah mengubah tempat dalam jawaban Jonathan, jadi sekarang komentarnya sepertinya tidak masuk akal.
mcv

1
Ingin memperhatikan bahwa solusi Javascript tidak berfungsi, itu hanya menghapus centang tombol. Saya kira itu perlu onclick="return false"untuk mencegah perubahan.
dmitry

2
Ketika saya mengatur radio "dinonaktifkan" saya menambahkan "style = kursor: default" untuk menghapus "kursor dinonaktifkan".
Joao Paulo

24

Ini adalah trik yang bisa Anda gunakan.

<input type="radio" name="name" onclick="this.checked = false;" />

4
Persis apa yang saya pikirkan, altho akan lebih baik jika Anda menjelaskan bahwa itu harus onClick="this.checked = <%=value%>"dari beberapa variasi :)
JustLoren

itu bagus untuk diketahui. diperiksa dapat memiliki nilai benar atau salah.
Sarfraz

Hanya peringatan bahwa ini tidak akan berhasil bagi kita yang menjelajah dengan javascript tidak diaktifkan secara default.
tloach

3
Bukan masalah untuk kasus saya. Kami sudah menggunakan banyak jQuery dan Ajax.
mcv

1
Patut dicatat bahwa Anda hanya dapat melakukan onclick="return false;"untuk menjaga nilai tetap sama untuk grup
Zach

12

Saya memiliki formulir yang panjang (250+ bidang) yang diposkan ke db. Ini adalah aplikasi pekerjaan online. Ketika seorang admin pergi untuk melihat aplikasi yang telah diajukan, formulir diisi dengan data dari db. Teks input dan textareas diganti dengan teks yang mereka kirimkan tetapi radio dan kotak centang berguna untuk tetap sebagai elemen form. Menonaktifkannya membuat mereka lebih sulit dibaca. Mengatur properti .checked ke false onclick tidak akan berfungsi karena mereka mungkin sudah diperiksa oleh pengguna yang mengisi aplikasi. Bagaimanapun...

onclick="return false;"

berfungsi seperti pesona untuk 'menonaktifkan' radio dan kotak centang ipso facto.


8

Solusi terbaik adalah dengan mengatur keadaan dicentang atau tidak dicentang (baik dari klien atau server) dan untuk tidak membiarkan pengguna mengubahnya setelah bangsal (yaitu membuatnya hanya dibaca) melakukan hal berikut:

<input type="radio" name="name" onclick="javascript: return false;" />

tidak! dalam hal ini, pengguna dapat mengedit html di browser, tandai opsi yang diperlukan seperti yang dipilih dan memposting formulir.
error1009

2

Saya telah menemukan cara javascript-berat untuk mencapai status readonly untuk kotak centang dan tombol radio. Ini diuji terhadap versi Firefox, Opera, Safari, Google Chrome saat ini, serta versi IE saat ini dan sebelumnya (turun ke IE7).

Mengapa tidak menggunakan saja properti yang dinonaktifkan yang Anda minta? Saat mencetak halaman, elemen input yang dinonaktifkan keluar dalam warna abu-abu. Pelanggan yang menerapkan ini ingin semua elemen memiliki warna yang sama.

Saya tidak yakin apakah saya boleh memposting kode sumber di sini, karena saya mengembangkan ini ketika bekerja untuk sebuah perusahaan, tetapi saya pasti dapat berbagi konsep.

Dengan acara onmousedown, Anda dapat membaca status pemilihan sebelum tindakan klik mengubahnya. Jadi, Anda menyimpan informasi ini dan kemudian memulihkan status ini dengan acara onclick.

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

Bagian javascript ini kemudian akan berfungsi seperti ini (sekali lagi hanya konsepnya):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

Anda sekarang dapat mengaktifkan / menonaktifkan tombol radio / kotak centang dengan mengubah properti onclick dan onmousedown dari elemen input.


2

Untuk tombol radio yang tidak dipilih, tandai sebagai dinonaktifkan. Ini mencegah mereka merespons input pengguna dan menghapus tombol radio yang diperiksa. Sebagai contoh:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

4
checked="yes"? Spek apa itu? Baik menggunakan checked="checked"atau hanya atribut checkedtanpa nilai. Sama untuk disabled.
Robin van Baalen

2

Cara JavaScript - ini bekerja untuk saya.

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

Alasan:

  1. $('#YourTableId').find('*') -> ini mengembalikan semua tag.

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); mengulangi semua objek yang ditangkap dalam hal ini dan menonaktifkan tag input.

Analisis (Debugging):

  1. form:radiobutton secara internal dianggap sebagai tag "input".

  2. Seperti pada fungsi di atas (), jika Anda mencoba mencetak document.write(this.tagName);

  3. Di mana pun, dalam tag ia menemukan tombol radio, ia mengembalikan tag input.

Jadi, baris kode di atas dapat lebih dioptimalkan untuk tag tombol radio, dengan mengganti * dengan input: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });


1

Pilihan yang cukup sederhana adalah membuat fungsi javascript yang dipanggil pada acara "onsubmit" formulir untuk mengaktifkan kembali radiobutton sehingga nilainya diposting dengan sisa formulir.
Tampaknya tidak ada kelalaian pada spesifikasi HTML, tetapi pilihan desain (yang logis, IMHO), radiobutton tidak dapat dibaca hanya sebagai tombol tidak bisa, jika Anda tidak ingin menggunakannya, maka nonaktifkan itu.


1

Saya menemukan bahwa penggunaan onclick='this.checked = false;'bekerja sampai batas tertentu. Tombol radio yang diklik tidak akan dipilih. Namun, jika ada tombol radio yang sudah dipilih (misalnya, nilai default), tombol radio itu akan menjadi tidak dipilih.

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

Untuk skenario ini, membiarkan nilai default sendiri dan menonaktifkan tombol radio lainnya mempertahankan tombol radio yang sudah dipilih dan mencegahnya tidak dipilih.

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

Solusi ini bukan cara yang paling elegan untuk mencegah nilai default diubah, tetapi ini akan berfungsi apakah javascript diaktifkan atau tidak.


1

Cobalah atributnya disabled, tetapi saya pikir Anda tidak akan mendapatkan nilai dari tombol radio. Atau setel gambar seperti:

<img src="itischecked.gif" alt="[x]" />radio button option

Salam Hormat.


1
oh, kode html saya dilucuti: img src = "itIsChecked.gif" alt = "[x]" OptionChecked
Tim

0

Saya menggunakan plugin JS yang memberi style pada kotak centang / elemen input radio dan menggunakan jQuery berikut untuk membuat 'status baca saja' di mana nilai yang mendasarinya masih diposkan tetapi elemen input tampaknya tidak dapat diakses oleh pengguna, yang saya percaya alasan yang dimaksud kita akan menggunakan atribut input hanya baca ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}

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.