Чому перемикачі радіо не можуть бути "лише для читання"?

Я хотів би показати перемикач, подати його значення, але залежно від обставин не можна редагувати його. Інвалід не працює, тому що він не подає значення (чи це робиться?), І він передає перемикач. Тільки для читання - це те, що я шукаю, але з якихось загадкових причин це не працює.

Чи є якийсь дивний трюк, який мені потрібно витягнути, щоб працювати лише для читання, як очікувалося? Чи повинен я просто зробити це в JavaScript?

До речі, хтось знає, чому лише функція читання не працює в радіо кнопок, а в інших тегах вводу? Це один із тих незрозумілих недоліків у специфікаціях HTML?

Я підробляв лише за допомогою кнопки перемикання, відключаючи лише неперевірені радіо кнопки. Це не дозволяє користувачеві вибрати інше значення, і перевірене значення завжди розміщуватиметься при надсиланні.

Використовуючи jQuery, щоб зробити лише читання:

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

Цей підхід також працював для того, щоб переглядати список вибору лише заново, за винятком того, що вам потрібно буде вимкнути кожен не вибраний варіант.

Радіо кнопки потрібно буде читати лише за інших варіантів. Якщо у вас немає інших опцій, перевірену перемикач не можна знімати. Якщо у вас є інші параметри, ви можете завадити користувачеві змінювати значення, лише відключивши інші параметри:

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

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

Це трюк, з яким можна піти.

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

У мене є довга форма (250+ полів), яка розміщує повідомлення на db. Це онлайн-додаток для працевлаштування. Коли адміністратор перегляне подану програму, форма заповнюється даними з db. Тексти та текстові тексти введення замінюються текстом, який вони надсилають, але радіо та прапорці корисно зберігати як елементи форми. Вимкнення їх ускладнює читання. Якщо встановити властивість .визначається помилковим onclick, не вийде, оскільки їх, можливо, перевірив користувач, що заповнює додаток. У всякому разі ...

onclick="return false;"

працює як принадність для відключення радіостанцій та прапорців ipso facto.

Найкращим рішенням є встановити перевірений або неперевірений стан (від клієнта чи сервера) і не дозволяти користувачеві змінювати його після того, як підопічні (тобто зробити це лише для читання):

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

Я придумав важкий для Javascript спосіб досягти стану лише для читання для прапорців і радіо кнопок. Він протестований на поточних версіях Firefox, Opera, Safari, Google Chrome, а також на поточній та попередній версіях IE (аж до IE7).

Чому б просто не скористатись інвалідом, який ви запитуєте? Під час друку сторінки відключені елементи введення виходять сірим кольором. Замовник, для якого це було реалізовано, хотів, щоб всі елементи вийшли одного кольору.

Я не впевнений, чи дозволять мені розміщувати тут вихідний код, оскільки я розробляв це під час роботи в компанії, але я точно можу поділитися концепціями.

За допомогою подій onmousedown ви можете прочитати стан вибору, перш ніж дія кліку змінить його. Таким чином, ви зберігаєте цю інформацію, а потім відновите ці стани за допомогою події 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>

Потім частина цього JavaScript працюватиме так (знову лише поняття):

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

Тепер ви можете увімкнути / відключити радіо кнопки / прапорці, змінивши властивості onclick та onmousedown вхідних елементів.

Для вибраних радіо кнопок позначте їх як відключені. Це не дозволяє їм реагувати на введення користувача та очищати перевірену радіо кнопку. Наприклад:

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

Шлях JavaScript - це працювало для мене.

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

Причина:

1. $('#YourTableId').find('*') -> це повертає всі теги.

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); ітератує над усіма об'єктами, захопленими в цьому, і вимикає вхідні теги.

Аналіз (налагодження):

1. form:radiobutton внутрішньо розглядається як тег "введення".

2. Як і у наведеній вище функції (), якщо ви спробуєте друкувати document.write(this.tagName);

3. Де б у тегах він не знаходив радіо кнопки, він повертає тег введення.

Отже, вище кодовий рядок можна оптимізувати для тегів радіо кнопок, замінивши * на введення: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Досить простим варіантом було б створити функцію javascript, яка називається у події "onsubmit" форми, щоб включити радіову кнопку назад, щоб її значення було розміщено з рештою форми.
Здається, це не є упущенням специфікацій HTML, але вибір дизайну (логічний IMHO) радіо-кнопки неможливо прочитати лише тому, що кнопкою не може бути, якщо ви не хочете ним користуватися, то відключити його.

Я виявив, що використання onclick='this.checked = false;'працює певною мірою. Натиснута радіо-кнопка не буде обрана. Однак, якщо вже була обрана радіо-кнопка (наприклад, значення за замовчуванням), цей перемикач стане невибраним.

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

Для цього сценарію, залишаючи значення за замовчуванням у спокої та відключивши інші перемикачі, зберігається вже вибрана радіо-кнопка та запобігає її невибір.

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

Це рішення - не найелегантніший спосіб запобігти зміні значення за замовчуванням, але він буде працювати, включений чи ні JavaScript.

Спробуйте атрибут disabled, але я думаю, що значення радіо кнопок ви не отримаєте. Або встановіть зображення замість цього:

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

З найкращими побажаннями.

Я використовую плагін JS, який стилює прапорці / елементи введення радіо та використовував наступний jQuery, щоб встановити "стан для читання", коли базове значення все ще розміщується, але вхідний елемент видається недоступним для користувача, що, я вважаю, передбачувана причина ми будемо використовувати атрибут введення лише для читання ...

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

А як із захопленням події "On_click ()" в JS і перевірки його як тут ?:

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