Чи можна встановити прапорці HTML для лише читання?

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

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

Ви можете скористатися цим:

<input type="checkbox" onclick="return false;"/>

Це працює, тому що повернення помилки від події клацання зупиняє ланцюг виконання.

READONLYне працює на прапорцях , як це заважає вам редагування поля в значенні , але за допомогою прапорця ви на самому справі редагування поля в стані (на || викл)

З сайту faqs.org :

Важливо розуміти, що РЕАЛЬНО просто заважає користувачеві змінювати значення поля, а не взаємодіяти з полем. Наприклад, у вікнах прапорця ви можете перевіряти їх і вимикати (таким чином встановлюючи стан CHECKED), але ви не змінюєте значення поля.

Якщо ви не хочете використовувати, disabledале все ж хочете подати значення, як щодо подання значення як прихованого поля та просто надрукування його вмісту користувачеві, коли вони не відповідають критеріям редагування? напр

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Це прапорець, який ви не можете змінити:

<input type="checkbox" disabled="disabled" checked="checked">

Просто додайте disabled="disabled"як атрибут.

Редагувати, щоб адресувати коментарі:

Якщо ви хочете, щоб дані були розміщені назад, ніж просте рішення - застосувати те саме ім'я до прихованого вводу:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

Таким чином, коли прапорець встановлено "вимкнено", він служить лише для візуального подання даних, а не фактично "пов'язаний" з даними. У списку публікації значення прихованого входу надсилається, коли прапорець відключений.

<input type="checkbox" onclick="this.checked=!this.checked;">

Але ви абсолютно ОБОВ'ЯЗКОВО перевіряєте дані на сервері, щоб переконатися, що вони не були змінені.

ще одне "просте рішення":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = "вимкнено" / disabled = вірно

Це представляє невелику проблему зручності використання.

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

Однак моїм підходом було б використання відключеного (Користувач очікує, що прапорець відключеного не може бути редагований, замість того, щоб використовувати JS, щоб увімкнути не працює) та додати обробник форми подання за допомогою JavaScript, який дозволяє встановити прапорці прямо перед формою подано. Таким чином ви отримуєте свої цінності.

тобто щось подібне:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

<input type="checkbox" readonly="readonly" name="..." />

з jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

все ще може бути хорошою ідеєю дати деякий візуальний натяк (css, текст, ...), що управління не прийме введення.

Я використовував це для досягнення результатів:

<input type=checkbox onclick="return false;" onkeydown="return false;" />

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

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

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

onclick="javascript: return false;"

Відповідь запізніла, але більшість відповідей, здається, занадто ускладнює її.

Як я розумію, ОП в основному хотіла:

1. Показуйте лише прапорець, щоб показати статус.
2. Значення повертається з формою.

Слід зазначити, що:

1. ОП воліла не використовувати disabledатрибут, оскільки вони "хочуть, щоб відмічені прапори були подані з рештою форми".
2. Невірно встановлені прапорці не подаються із формою, оскільки цитата з ОП у 1. вище вказує, що вони вже знали. В основному, значення прапорця існує лише в тому випадку, якщо воно встановлено.
3. Відключений прапорець чітко вказує, що його не можна змінити за дизайном, тому користувач навряд чи намагатиметься його змінити.
4. Значення прапорця не обмежується вказівкою його статусу, наприклад, yesабо false, але може бути будь-яким текстом.

Тому, оскільки readonlyатрибут не працює, найкращим рішенням, що не потребує JavaScript, є:

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

Отже, для встановленого прапорця:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Для невірно встановленого прапорця:

<input type="checkbox" disabled="disabled" />

Основна проблема з відключеними входами, особливо прапорцями, полягає в їх поганому контрасті, що може бути проблемою для деяких з певними вадами зору. Можливо, краще вказати значення простими словами, такими як Status: noneабо Status: implemented, але включаючи прихований ввід вище, коли використовується останнє, наприклад:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Більшість поточних відповідей мають одну або декілька таких проблем:

1. Перевірте лише клавіатуру миші.
2. Перевірити лише на завантаженні сторінки.
3. Підключіть постійно популярну зміну або надсилайте події, які не завжди спрацюють, якщо щось інше їх підчепило.
4. Потрібні приховані дані або інші спеціальні елементи / атрибути, які потрібно скасувати, щоб повторно включити прапорець за допомогою javascript.

Далі просто і не має жодної з цих проблем.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

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

Це працює.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

Якщо ви хочете, щоб вони були передані на сервер із формою, але не були взаємодіючими для користувача, ви можете використовувати pointer-events: nonecss ( працює у всіх сучасних браузерах, крім IE10- і Opera 12- ) і встановити вкладку-індекс,  -1щоб запобігти зміні через клавіатуру. Також зауважте, що ви не можете використовувати labelтег, оскільки натискання на нього все одно змінить стан.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

<input type="checkbox" onclick="return false" /> буде працювати для вас, я цим користуюся

Деякі відповіді тут здаються трохи крутими, але ось невеликий злом.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

то в jquery ви можете вибрати один з двох варіантів:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

Сігналы абмеркавання

демо: http://jsfiddle.net/5WFYt/

Спираючись на вищенаведені відповіді, якщо ви використовуєте jQuery, це може бути хорошим рішенням для всіх матеріалів:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Я використовую це з Asp.Net MVC для встановлення деяких елементів форми лише для читання. Наведене вище працює для тексту та прапорців, встановлюючи будь-який батьківський контейнер як .readonly, наприклад, такі сценарії:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

Я знаю, що "інвалід" не є прийнятною відповіддю, оскільки оператор хоче, щоб він розмістив. Однак, вам завжди доведеться перевіряти значення на стороні сервера НАДІЛЬКО, якщо у вас встановлена ​​опція для читання. Це тому, що ви не можете зупинити зловмисного користувача публікувати значення за допомогою атрибута readonly.

Я пропоную зберегти вихідне значення (сторону сервера) та встановити його на вимкнено. Потім, коли вони надсилають форму, ігноруйте будь-які розміщені значення та приймайте початкові значення, які ви зберегли.

Це виглядатиме та поводитиметься так, ніби це цінність лише для читання. І він обробляє (ігнорує) публікації від шкідливих користувачів. Ти вбиваєш 2 птахи одним каменем.

Я б прокоментував відповідь ConroyP, але для цього потрібно 50 репутацій, яких у мене немає. У мене достатньо репутації, щоб написати ще одну відповідь. Вибачте.

Проблема у відповіді ConroyP полягає в тому, що прапорець не змінюється, навіть не включаючи його на сторінку. Хоча Electrons_Ahoy не передбачає стільки, найкращою відповіддю була б така, у якій незмінний прапорець виглядатиме схожим, якщо не таким, як змінний прапорець, як це має місце, коли застосовується атрибут "вимкнено". Рішення, яке стосується двох причин, які Electrons_Ahoy дає за те, що не хоче використовувати атрибут "disabled", не обов'язково було б недійсним, оскільки воно використовувало атрибут "disabled".

Припустимо дві булеві змінні, $ перевірені та $ відключені:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

Поставте прапорець як встановлений прапорець, якщо $ прапорець вірно. Поле галочки відображається як галочка, якщо $ check невірна. Користувач може змінити стан прапорця, якщо і лише якщо $ disabled є хибним. Параметр "my_name" не публікується, коли прапорець не встановлений, користувачем чи ні. Параметр "my_name = 1" розміщується, коли прапорець встановлений, користувачем чи ні. Я вважаю, що саме це шукало Electrons_Ahoy.

Ні, прапорці введення не можна зчитувати лише.

Але ви можете зробити їх лише за допомогою javascript!

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

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Ви можете додати цей скрипт у будь-який час після завантаження jQuery.

Він буде працювати для динамічно доданих елементів.

Він працює, вибираючи подію натискання (що відбувається до події зміни) на будь-якому елементі сторінки, потім перевіряє, чи цей елемент є прапором для повторного читання, а якщо він є, то блокує зміни.

Є так багато ifs, щоб це не вплинуло на продуктивність сторінки.

Просто використовуйте простий відключений тег, як цей нижче.

<input type="checkbox" name="email"  disabled>

Альтернативна ідея - використовувати накладку та приховати своє тільки для читання входів

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

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

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Класна річ у цьому коді полягає в тому, що він дозволяє змінювати атрибут "readonly" у всьому коді без необхідності повторного введення кожного прапорця.

Він працює і для радіо кнопок.

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

OK відключено це зробить - на жаль, вимкнені елементи керування не користуються клавіатурою, тому вони не відповідають усім законодавству про доступність. Це НАЙБІЛЬШЕ завивання в HTML, яке я знаю.

Внесок дуже дуже пізно ... але все одно. Під час завантаження сторінки використовуйте jquery, щоб вимкнути всі прапорці, крім вибраного на даний момент. Потім встановіть вибраний на даний момент лише як прочитаний, щоб він мав схожий вигляд з вимкненими. Користувач не може змінити значення, і вибране значення все одно подає.

Дуже пізно до вечірки, але я знайшов відповідь на MVC (5) Я відключив CheckBox і додав прихованийФОРЕЖЕ ДО ПЕРЕД прапорець, тому коли він публікує, якщо спочатку знаходить приховане поле та використовує це значення. Це справді працює.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

Я використовував би атрибут readonly

<input type="checkbox" readonly>

Потім використовуйте CSS для відключення взаємодій:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Зауважте, що використання псевдокласу: лише для читання тут не працює.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

Я просто не хочу, щоб клієнт міг змінити їх за певних обставин.

НАЙКРАДНО сам не працюватиме. Можливо, ви зможете зробити щось приємне без CSS, але ми зазвичай просто відключаємо їх.

ПОПЕРЕДЖЕННЯ. Якщо вони розміщені назад, клієнт може змінити їх, відтермінувати. Ви не можете покладатися лише на читання, щоб запобігти користувачеві щось змінити. Завжди можна використовувати Fiddler або просто шанувати html w / firebug або щось подібне.

Моє рішення насправді протилежне рішенню FlySwat, але я не впевнений, чи вдасться він працювати у вашій ситуації. У мене є група прапорців, і в кожному є обробник onClick, який подає форму (вони використовуються для зміни налаштувань фільтра для таблиці). Я не хочу дозволити кілька кліків, оскільки наступні кліки після першого ігноруються. Тому я вимикаю всі прапорці після першого клацання та після надсилання форми:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Поле прапорців міститься в прольотному елементі з ідентифікатором "фільтрів" - друга частина коду є оператором jQuery, який повторюється через прапорці і вимикає кожен. Таким чином, значення прапорців все ще надсилаються через форму (оскільки форма була подана перед відключенням), і це не дозволяє користувачеві змінювати їх, поки сторінка не завантажиться.