Radyo düğmeleri neden “salt okunur” olamaz?

Bir radyo düğmesi göstermek, değerini göndermek istiyorum, ancak koşullara bağlı olarak düzenlenebilir değilim. Devre dışı işlevi çalışmaz, çünkü değer göndermez (ya da öyle mi?) Ve radyo düğmesini grileştirir. Salt okunur gerçekten aradığım şey, ancak bazı gizemli nedenlerden dolayı çalışmıyor.

Beklendiği gibi çalışmak için salt okunur almak için çekmem gereken garip bir numara var mı? Sadece JavaScript ile mi yapmalıyım?

Bu arada, diğer giriş etiketlerinde çalışırken salt okunur neden radyo düğmelerinde çalışmadığını bilen var mı? Bu, HTML spesifikasyonlarındaki anlaşılmaz eksikliklerden biri mi?

Yalnızca işaretlenmemiş radyo düğmelerini devre dışı bırakarak bir radyo düğmesine salt okunur oldum. Kullanıcının farklı bir değer seçmesini engeller ve kontrol edilen değer her zaman gönderimde gönderilir.

Salt okunur yapmak için jQuery kullanma:

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

Bu yaklaşım, seçili olmayan her bir seçeneği devre dışı bırakmanız gerekmesi dışında, salt seçim listesi yapmak için de işe yaradı.

Radyo düğmelerinin yalnızca başka seçenekler varsa salt okunur olması gerekir. Başka seçeneğiniz yoksa, işaretli bir radyo düğmesinin işareti kaldırılamaz. Başka seçenekleriniz varsa, kullanıcının yalnızca diğer seçenekleri devre dışı bırakarak değeri değiştirmesini engelleyebilirsiniz:

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

Keman: http://jsfiddle.net/qqVGu/

Bu, yapabileceğiniz hiledir.

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

Bir db mesajlar uzun bir form (250 + alanları) var. Çevrimiçi bir istihdam uygulamasıdır. Bir yönetici dosyalanmış bir uygulamaya baktığında, form db'den gelen verilerle doldurulur. Giriş metinleri ve textareas, gönderdikleri metinle değiştirilir, ancak radyolar ve onay kutuları form öğeleri olarak tutmak için yararlıdır. Bunları devre dışı bırakmak, okumayı zorlaştırır. .Checked özelliğini false onclick olarak ayarlamak, uygulamayı dolduran kullanıcı tarafından kontrol edilmiş olabileceğinden çalışmaz. Neyse ...

onclick="return false;"

radyoları ve onay kutularını ipso facto 'devre dışı bırakmak' için bir cazibe gibi çalışır.

En iyi çözüm, işaretlenmiş veya işaretlenmemiş durumu (istemci veya sunucudan) ayarlamak ve kullanıcının servislerden sonra değiştirmesine izin vermemek (yani salt okunur yap):

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

Onay kutuları ve radyo düğmeleri için salt okunur bir duruma ulaşmak için javascript-ağır bir yol buldum. Firefox, Opera, Safari, Google Chrome'un geçerli sürümlerinin yanı sıra IE'nin geçerli ve önceki sürümlerine (IE7'ye kadar) karşı test edilmiştir.

Neden sorduğunuz engelli mülkü kullanmıyorsunuz? Sayfayı yazdırırken, devre dışı bırakılan giriş öğeleri gri renkte çıkıyor. Bunun uygulandığı müşteri, tüm öğelerin aynı renkte görünmesini istedi.

Bir şirket için çalışırken bunu geliştirdiğim için kaynak kodunu buraya göndermeme izin verilip verilmediğinden emin değilim, ancak kavramları kesinlikle paylaşabilirim.

Onmousedown olaylarında, tıklama eylemi değişmeden önce seçim durumunu okuyabilirsiniz. Böylece bu bilgileri saklar ve ardından bu durumları bir onclick olayıyla geri yüklersiniz.

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

Bunun javascript kısmı şu şekilde çalışır (yine sadece kavramlar):

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

Artık giriş öğelerinin onclick ve onmouseown özelliklerini değiştirerek radyo düğmelerini / onay kutularını etkinleştirebilir / devre dışı bırakabilirsiniz.

Seçilmeyen radyo düğmeleri için devre dışı olarak işaretleyin. Bu, kullanıcı girişine yanıt vermelerini ve kontrol edilen radyo düğmesini silmelerini önler. Örneğin:

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

JavaScript yolu - bu benim için çalıştı.

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

Sebep:

1. $('#YourTableId').find('*') -> bu tüm etiketleri döndürür.

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); bunun içinde yakalanan tüm nesnelerin üzerinde yinelenir ve giriş etiketlerini devre dışı bırakır.

Analiz (Hata Ayıklama):

1. form:radiobutton dahili olarak "giriş" etiketi olarak kabul edilir.

2. Yukarıdaki işlevdeki gibi (), yazdırmayı denerseniz document.write(this.tagName);

3. Her yerde, etiketlerde radyo düğmeleri bulursa, bir giriş etiketi döndürür.

Bu nedenle, yukarıdaki kod satırı, radyo düğmesi etiketleri için * ile giriş değiştirilerek daha iyi hale getirilebilir: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Oldukça basit bir seçenek, formun geri kalanı ile değeri gönderilecek şekilde radyo düğmesini geri etkinleştirmek için formun "onsubmit" olayında çağrılan bir javascript işlevi oluşturmak olacaktır.
HTML özelliklerinde bir ihmal gibi görünmüyor, ancak bir tasarım seçimi (mantıklı olan, IMHO), bir radyo düğmesi bir düğme okunamadığı için okunamıyor, eğer kullanmak istemiyorsanız, devre dışı bırak.

Kullanımın onclick='this.checked = false;'bir dereceye kadar işe yaradığını buldum . Tıklanan bir radyo düğmesi seçilmez. Ancak, önceden seçilmiş bir radyo düğmesi (örneğin, varsayılan bir değer) varsa, o radyo düğmesi seçimi kaldırılır .

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

Bu senaryoda, varsayılan değeri yalnız bırakmak ve diğer radyo düğmelerini devre dışı bırakmak, önceden seçilmiş radyo düğmesini korur ve seçiminin kaldırılmasını önler.

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

Bu çözüm, varsayılan değerin değiştirilmesini önlemenin en zarif yolu değildir, ancak javascript'in etkin olup olmadığı işe yarayacaktır.

Özniteliği deneyin disabled, ancak bence radyo düğmelerinin değerini alamayacaksınız. Veya bunun yerine resimleri ayarlayın:

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

Saygılarımla.

Ben onay kutusu / radyo giriş öğelerini stilleri ve temel değer hala gönderilir ama giriş elemanı kullanıcı için erişilemeyen görünür bir 'salt okunur durumu' oluşturmak için aşağıdaki jQuery kullanılan bir JS eklentisi kullanıyorum , amaçlanan neden olduğuna inanıyorum salt okunur bir girdi özelliği kullanırdık ...

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

JS'de bir "On_click ()" etkinliği yakalamaya ve buradaki gibi kontrol etmeye ne dersiniz ?:

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