Mengapa tombol radio tidak bisa "dibaca"?

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?

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.

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/

Ini adalah trik yang bisa Anda gunakan.

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

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.

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

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.

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>

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

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.

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.

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.

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

Bagaimana dengan menangkap peristiwa "On_click ()" di JS dan memeriksanya seperti di sini ?:

http://www.dynamicdrive.com/forums/showthread.php?t=33043