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

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

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

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

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

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

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

Поскольку 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

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

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

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

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

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

"agree,false"

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

"false"

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

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

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

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

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

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

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

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

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

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

http://jsfiddle.net/vwUUc/

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

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

});

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

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

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

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

Поскольку:

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

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

К сожалению, «простого» решения не существует. Атрибут только для чтения не может применяться к флажкам. Я прочитал спецификацию 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();'>

Добавьте onsubmit="this['*nameofyourcheckbox*'].disabled=false"в форму.

Нет другого варианта, кроме 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

<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 является примером предыдущего предложения для управления вторым флажком, который отмечен (отправляет его значение) или не отмечен (не отправляет его значение) в соответствии с предложением, и пользователь не может изменять его статус; нет необходимости управлять отключением второго флажка

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

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

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

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

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

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

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

Я просто объединил предложения 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.