Dlaczego przyciski radiowe nie mogą być „tylko do odczytu”?

Chciałbym wyświetlić przycisk opcji, podać jego wartość, ale w zależności od okoliczności, nie można go edytować. Wyłączone nie działa, ponieważ nie przesyła wartości (czy robi to?) I wyszarza przycisk opcji. Tylko do odczytu jest naprawdę tym, czego szukam, ale z jakiegoś tajemniczego powodu nie działa.

Czy jest jakaś dziwna sztuczka, którą muszę wyciągnąć, aby tylko do odczytu działała zgodnie z oczekiwaniami? Czy zamiast tego powinienem to zrobić w JavaScript?

Nawiasem mówiąc, czy ktoś wie, dlaczego tylko do odczytu nie działa w przyciskach opcji, podczas gdy działa w innych znacznikach wejściowych? Czy to jedno z niezrozumiałych pominięć w specyfikacjach HTML?

Sfałszowałem tylko do odczytu przycisk opcji, wyłączając tylko niezaznaczone przyciski opcji. Uniemożliwia to użytkownikowi wybranie innej wartości, a sprawdzona wartość zawsze będzie wysyłana po przesłaniu.

Używanie jQuery do odczytu:

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

Podejście to działało również w przypadku tworzenia listy wyboru tylko do odczytu, z tym wyjątkiem, że musisz wyłączyć każdą niewybraną opcję.

Przyciski opcji będą musiały być tylko do odczytu, jeśli istnieją inne opcje. Jeśli nie masz żadnych innych opcji, zaznaczonego przycisku opcji nie można odznaczyć. Jeśli masz inne opcje, możesz uniemożliwić użytkownikowi zmianę wartości poprzez wyłączenie innych opcji:

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

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

To jest sztuczka, którą możesz zastosować.

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

Mam długi formularz (ponad 250 pól), który wysyła posty do bazy danych. Jest to internetowy wniosek o zatrudnienie. Gdy administrator idzie do aplikacji, która została złożona, formularz jest wypełniany danymi z bazy danych. Teksty wejściowe i obszary tekstowe są zastępowane tekstem, który przesłały, ale radia i pola wyboru są przydatne jako elementy formularza. Wyłączenie ich utrudnia czytanie. Ustawienie właściwości .checked na false przy kliknięciu nie będzie działać, ponieważ mogły zostać sprawdzone przez użytkownika wypełniającego aplikację. W każdym razie...

onclick="return false;"

działa jak urok dla „wyłączających” radiotelefonów i pól wyboru ipso facto.

Najlepszym rozwiązaniem jest ustawienie stanu zaznaczonego lub niezaznaczonego (z poziomu klienta lub serwera) i niedopuszczenie, aby użytkownik zmienił go po totemach (tj. Uczynił to tylko do odczytu):

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

Wymyśliłem sposób na javascript, aby osiągnąć stan tylko do odczytu dla pól wyboru i przycisków opcji. Jest testowany z bieżącymi wersjami Firefox, Opera, Safari, Google Chrome, a także z bieżącymi i poprzednimi wersjami IE (do IE7).

Dlaczego po prostu nie skorzystasz z właściwości niepełnosprawnych, o którą pytasz? Podczas drukowania strony wyłączone elementy wejściowe są wyświetlane w szarym kolorze. Klient, dla którego zostało to wdrożone, chciał, aby wszystkie elementy miały ten sam kolor.

Nie jestem pewien, czy wolno mi opublikować kod źródłowy tutaj, ponieważ opracowałem go podczas pracy dla firmy, ale z pewnością mogę podzielić się koncepcjami.

W przypadku zdarzeń onmousedown możesz odczytać stan zaznaczenia, zanim zmieni go działanie kliknięcia. Więc przechowujesz te informacje, a następnie przywracasz te stany za pomocą zdarzenia 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>

Część javascript będzie działać w ten sposób (ponownie tylko pojęcia):

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

Możesz teraz włączyć / wyłączyć przyciski opcji / pola wyboru, zmieniając właściwości onclick i onmousedown elementów wejściowych.

W przypadku niewybranych przycisków opcji oflaguj je jako wyłączone. Zapobiega to reagowaniu na dane wprowadzone przez użytkownika i usuwaniu zaznaczonego przycisku opcji. Na przykład:

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

Sposób JavaScript - to zadziałało dla mnie.

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

Powód:

1. $('#YourTableId').find('*') -> zwraca wszystkie tagi.

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); iteruje wszystkie przechwycone obiekty i wyłącza znaczniki wejściowe.

Analiza (debugowanie):

1. form:radiobutton jest wewnętrznie uważany za tag „wejściowy”.

2. Podobnie jak w powyższej funkcji (), jeśli spróbujesz wydrukować document.write(this.tagName);

3. Gdziekolwiek w tagach znajduje przyciski radiowe, zwraca tag wejściowy.

Tak więc powyższą linię kodu można bardziej zoptymalizować dla tagów przycisków opcji, zastępując * wejściem: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Dość prostą opcją byłoby utworzenie funkcji javascript wywoływanej w zdarzeniu „onsubmit” formularza, aby umożliwić powrót przycisku radiowego, aby jego wartość była księgowana wraz z resztą formularza.
Wydaje się, że nie jest to pominięcie w specyfikacji HTML, ale wybór projektu (logiczny, IMHO), przycisk radiowy nie może być odczytany tylko jako przycisk, nie może być, jeśli nie chcesz go użyć, to wyłącz to.

Odkryłem, że użycie onclick='this.checked = false;'działało do pewnego stopnia. Kliknięty przycisk opcji nie zostanie wybrany. Jeśli jednak był już wybrany przycisk opcji (np. Wartość domyślna), ten przycisk opcji nie byłby zaznaczony.

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

W tym scenariuszu pozostawienie wartości domyślnej w spokoju i wyłączenie innych przycisków opcji zachowuje już wybrany przycisk opcji i zapobiega jego odznaczeniu.

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

To rozwiązanie nie jest najbardziej eleganckim sposobem zapobiegania zmianie wartości domyślnej, ale zadziała bez względu na to, czy włączono javascript.

Wypróbuj ten atrybut disabled, ale myślę, że nie dostaniesz wartości przycisków opcji. Lub ustaw obrazy zamiast:

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

Z poważaniem.

Korzystam z wtyczki JS, która stylizuje pola wyboru / elementy wejściowe radia i użyłem następującego jQuery, aby ustalić „stan tylko do odczytu”, w którym podstawowa wartość jest nadal księgowana, ale element wejściowy wydaje się niedostępny dla użytkownika, co jest moim zdaniem zamierzonym powodem użylibyśmy atrybutu wejściowego tylko do odczytu ...

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

A co z przechwytywaniem zdarzenia „On_click ()” w JS i sprawdzaniem go jak tutaj ?:

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