Как сделать элемент html <select> похожим на "отключен", но передать значения?

Когда я отключу

<select name="sel" disabled>
    <option>123</option>
</select>

он не передает свою переменную.

Что делать, чтобы выглядеть как отключенный, но находиться в "нормальном" состоянии?

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

Ответ 1

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

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

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

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});

Ответ 2

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>

или вы можете использовать jQuery

$("#test option:not(:selected)").prop("disabled", true);

Ответ 3

Мое решение состояло в том, чтобы создать отключенный класс в CSS:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

а затем ваш выбор будет:

<select name="sel" class="disabled">
    <option>123</option>
</select>

Пользователь не сможет выбрать какие-либо значения, но значение выбора все равно будет передано при отправке формы.

Ответ 4

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

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

Это фактически выведет значение "по умолчанию" (без кавычек, очевидно), если выбор отключен javascript (или jQuery) или даже если ваш код записывает html, отключая сам элемент с атрибутом: disabled = "disabled".

Ответ 5

Добавьте класс .disabled и используйте этот CSS:

.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}

Демо: http://jsfiddle.net/ZCSRq/

Ответ 6

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

Например:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

Ответ 7

Вау, у меня была такая же проблема, но строка кода разрешила мою проблему. Я написал

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

Я отправляю форму на php script, тогда он печатает правильное значение для каждого параметра, пока оно было "null" раньше.

Скажите, если это сработает. Интересно, так ли это работает на моем как-то.

Ответ 8

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

может отключить издание в элементе <select class="yourClass"> с помощью этого кода:

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

если вы хотите попробовать, он может увидеть его здесь: https://jsfiddle.net/9kjqjLyq/

Ответ 9

Просто добавив, что я сделал в noobie шаги, потому что я asp-noob.;-) Мое решение, основанное на @tomaroo's, выглядит следующим образом: я создал javascript-функцию, которая устанавливает атрибут "disabled" в true или удаляет весь атрибут:

function EnableControl(Enable) {
if (Enable) {
    document.getElementById("controlName").removeAttribute('disabled');
}
else 
{
    document.getElementById("controlName").setAttribute('disabled', Enable);
}

}

Примечание: ваш элемент управления должен иметь атрибут Id = "controlName".

Затем в HTML-теле я добавил OnLoad:

<BODY ONLOAD="EnableControl(false)">

Это гарантирует, что вызывается EnableControl() при загрузке страницы. Наконец, я добавил OnSubmit для формы:

<FORM ONSUBMIT="EnableControl(true)" METHOD="POST" ACTION="writer.asp">

Это гарантирует, что атрибут disabled-атрибута будет удален для элемента управления до публикации формы.