Как POST / Отправить флажок ввода, который отключен? - PullRequest
Новая
       33

Как POST / Отправить флажок ввода, который отключен?

122 голосов
/ 18 января 2011

У меня есть флажок, который при определенных условиях должен быть отключен.Оказывается, HTTP не публикует отключенные данные.

Как мне обойти это?отправка ввода, даже если он отключен, и сохранение входа отключенным?

Ответы [ 16 ]

102 голосов
/ 18 января 2011

ОБНОВЛЕНИЕ : READONLY не работает с флажками

Вы можете использовать disabled="disabled", но на этом этапе значение флажка не появится в значениях POST.Одна из стратегий заключается в добавлении скрытого поля, содержащего значение флажка в той же форме, и считывании значения из этого поля

Просто измените disabled на readonly

88 голосов
/ 26 ноября 2011

Я решил эту проблему.

Поскольку тег readonly="readonly" не работает (я пробовал разные браузеры), вы должны использовать disabled="disabled" вместо. Но значение вашего флажка не будет опубликовано тогда ...

Вот мое решение:

Чтобы получить «только для чтения» look и POST значение флажка одновременно, просто добавьте скрытый «вход» с тем же именем и значением, что и ваш флажок . Вы должны держать его рядом с вашим флажком или между теми же <form></form> тегами: 

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

Кроме того, просто дать вам знать, readonly="readonly", readonly="true", readonly="", или просто READONLY НЕ решит это! Я потратил несколько часов, чтобы понять это!

Эта ссылка также НЕ актуальна (может быть, еще нет или нет, я понятия не имею): http://www.w3schools.com/tags/att_input_readonly.asp

72 голосов
/ 19 ноября 2012

Если вы довольны использованием JQuery, удалите атрибут отключен при отправке формы: 

$("form").submit(function() {
    $("input").removeAttr("disabled");
});
10 голосов
/ 18 января 2011

Вы можете обработать это таким образом ... Для каждого флажка создайте скрытое поле с тем же атрибутом name.Но установите значение этого скрытого поля с некоторым значением по умолчанию, которое вы можете проверить.Например .. 

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

Если флажок «установлен» при отправке формы, то значение этого параметра формы будет 

"agree,false"

Если флажок не установлентогда значение будет 

"false"

Вы можете использовать любое значение вместо «ложь», но вы поймете, что идея.

7 голосов
/ 19 февраля 2013

Простейший способ сделать это: 

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

Это не даст пользователю возможность снять этот флажок и при отправке формы все равно будет отправлять свое значение.Снимите флажок, если хотите, чтобы пользователь не мог установить этот флажок.

Кроме того, вы можете затем использовать javascript, чтобы очистить щелчок мышью, как только определенное условие выполнено (если это то, что вам нужно).Вот грязная скрипка, показывающая, что я имею в виду.Это не идеально, но вы понимаете суть.

http://jsfiddle.net/vwUUc/

7 голосов
/ 10 октября 2012 
<input type="checkbox" checked="checked" onclick="this.checked=true" />

Я начал с проблемы: "как выставить / отправить флажок ввода, который отключен?" и в своем ответе я пропустил комментарий: «Если мы хотим отключить флажок, нам, безусловно, нужно сохранить префиксное значение (отмечено или не отмечено), а также мы хотим, чтобы пользователь знал об этом (в противном случае мы должны использовать скрытый тип и не флажок) ». В своем ответе я предположил, что мы хотим всегда ставить флажок, и этот код работает таким образом. Если мы нажмем на этот ckeckbox, он будет проверен навсегда, и его значение будет POSTED / Submitted! Точно так же, если я напишу onclick = "this.checked = false" без флажка = "проверено" (примечание: значение по умолчанию не проверено), оно будет отменено навсегда, а его значение не будет POSTED / Submitted!.

6 голосов
/ 29 декабря 2017

создать класс CSS, например: 

.disable{
        pointer-events: none;
        opacity: 0.5;
}

применить этот класс вместо отключенного атрибута

4 голосов
/ 17 октября 2015

Это работает как шарм:

  1. Удалить отключенные атрибуты
  2. Отправить форму
  3. Добавьте атрибуты снова.Лучший способ сделать это - использовать функцию setTimeOut , например, с задержкой в ​​1 миллисекунду.

Единственным недостатком является короткое мигание отключенных полей ввода при отправке.По крайней мере, в моем сценарии это не большая проблема! 

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});
3 голосов
/ 08 июня 2013

Поскольку:

  • установка атрибута readonly для флажка недопустима в соответствии со спецификацией HTML,
  • использование скрытого элемента для передачи значения не очень приятный способ и
  • установка onclick JavaScript, который предотвращает изменение значения, тоже не очень приятен

Я предложу вам еще одну возможность:

Установите флажок как отключенный как обычно.И перед отправкой формы пользователем включите этот флажок с помощью JavaScript. 

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

Поскольку флажок активирован до отправки формы, его значение публикуется обычным способом.Единственное, что не очень приятно в этом решении, это то, что этот флажок становится активным на некоторое время, и это могут видеть пользователи.Но это всего лишь деталь, с которой я могу жить.

3 голосов
/ 07 февраля 2013

Не отключайте его; вместо этого установите его только для чтения, хотя это не имеет никакого эффекта, поскольку не позволяет пользователю изменять состояние. Но вы можете использовать jQuery для обеспечения этого (запретить пользователю изменять состояние флажка: 

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

Это предполагает, что все флажки, которые вы не хотите изменять, имеют атрибут "только для чтения". например. 

<input type="checkbox" readonly="readonly">
Страница:
...