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


130

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

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


Думаю, это решение тоже помогает: stackoverflow.com/questions/12769664/…
Сергей Фомин

Думаю, это решение тоже помогает: stackoverflow.com/questions/12769664/…
Сергей Фомин

Ответы:


106

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

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

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


7
Чтобы сделать его действительным HTML, специально установите для readonly значение readonly, например:<input name="foo" value="bar" readonly="readonly" />
Мэтт Хаггинс,

5
Чтобы поле ввода «только для чтения» выглядело как поле «отключено», установите 'style = "color: gray; background-color: # F0F0F0;"'.
Дэн Ниссенбаум

3
@MattHuggins Установка значения только-атрибута название атрибутов , как проверено, только для чтения и т.д. ... и конец слэш о неприменении пары атрибутов не имеет ничего общего с HTML действительности - они необходимы для XHTML валидности ...
jave.web

Кстати: возможно, кто-то споткнется об этом: НЕ ИСПОЛЬЗУЙТЕ ЭТО для кнопки input type =, они не будут «отключены», используйте «disabled = 'disabled'»
Мейстер Шницель

2
readonlyне будет работать, так как вы не сможете опубликовать значение флажка с таким тегом, используйте disabledвместе со скрытым элементом ввода для хранения значения флажка, посмотрите, как: stackoverflow.com/a/8274787/448816
mikhail-t

91

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

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

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

Чтобы получить вид «только для чтения» и значение флажка 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


здесь должны быть одинаковые идентификаторы для скрытых входов и флажков?
user2167382

нет, Id может быть любым, но «имя» и «значение» должны быть одинаковыми.
mikhail-t

Насколько это надежно в различных браузерах?
Тим

это было протестировано и хорошо работало в последних версиях Chrome, Firefox и IE 11, вот реализация, попробуйте в своем браузере: mvccbl.com/…
-t

74

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

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

Включит ли это элемент управления в пользовательском интерфейсе?
анар халилов 09

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

Немного устарело, но в качестве примечания: если вы используете <select>или <textfield>или другие элементы HTML, поддерживающие disabledатрибут, вы можете выбрать их и включить все с помощью: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil

10

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

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

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

"agree,false"

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

"false"

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


5
Разве вы не ненавидите, когда вы пишете какое-то сложное решение проблемы, а затем, когда вы обновляетесь, кто-то (например, Франческо) идет и пишет простое однострочное письмо? ;)
jessegavin

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

@jessegavin Учитывая, что его «простой лайнер» больше не работает, и он обновил свой ответ, включив в него ваш, нет, я не могу сказать, что работаю.
RyanfaeScotland

8
<input type="checkbox" checked="checked" onclick="this.checked=true" />

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


это просто дублирует то, что уже делает флажок, но если он был отключен javascript или чем-то еще, он все равно будет отключен, не могли бы вы объяснить немного больше, что вы собирались, может быть, я неправильно понимаю, поскольку это всего лишь строка кода
ScottC

8

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

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

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


7

Самый простой способ сделать это:

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

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

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

http://jsfiddle.net/vwUUc/


4

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

  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

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

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

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

<input type="checkbox" readonly="readonly">

Спасибо тебе за это! У меня почему-то не работал "скрытый" ввод. Это меня спасло. Действительно, очень хороший хак!
NewbieProgrammer

3

Поскольку:

  • установка флажка для атрибута 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>

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


1

К сожалению, «простого» решения не существует. Атрибут только для чтения не может применяться к флажкам. Я прочитал спецификацию W3 о флажке и нашел виновника:

Если элемент управления не имеет текущего значения при отправке формы, пользовательские агенты не обязаны рассматривать его как успешный элемент управления. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Это приводит к тому, что состояние unchecked и disabled приводят к одному и тому же анализируемому значению.

  • readonly = "readonly" не является допустимым атрибутом для флажков.
  • OnClick = "event.preventDefault ();" не всегда хорошее решение, поскольку оно активируется на самом флажке. Но в некоторых случаях это может сработать.
  • Включение флажка onSubmit не является решением, поскольку элемент управления все еще не рассматривается как успешный элемент управления, поэтому значение не будет проанализировано.
  • Добавление еще одного скрытого ввода с тем же именем в ваш HTML-код не работает, поскольку первое значение элемента управления перезаписывается вторым значением элемента управления, поскольку оно имеет то же имя.

Единственный надежный способ сделать это - добавить скрытый ввод с тем же именем с помощью javascript при отправке формы .

Вы можете использовать небольшой фрагмент, который я сделал для этого:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

Это ищет первую форму в документе, собирает все входные данные и ищет отключенные входные данные. Когда обнаруживается отключенный вход, в родительском узле создается скрытый вход с тем же именем и значением «on» (если он находится в состоянии «отмечен») и «» (если он находится в состоянии «» - не отмечен).

Эта функция должна запускаться событием onsubmit в элементе FORM как:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>


1

Нет другого варианта, кроме hiddenполя, поэтому попробуйте использовать hiddenполе, как показано в приведенном ниже коде:

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

0
<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

Функция some_name является примером предыдущего предложения для управления вторым флажком, который отмечен (отправляет его значение) или не отмечен (не отправляет его значение) в соответствии с предложением, и пользователь не может изменять его статус; нет необходимости управлять отключением второго флажка


0

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

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

0

Добавление onclick="this.checked=true"Решите мою проблему:
Пример:

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

0

Вот еще одна работа, которой можно управлять из бэкэнда.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

В ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

Класс добавлен только в стилистических целях.


0

Я просто объединил предложения HTML, JS и CSS в ответах здесь

HTML:

<input type="checkbox" readonly>

JQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS:

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

Поскольку элемент не отключен, он все равно проходит POST.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.