Отключение раскрывающегося списка не выполняется. Я попробую ваше решение.
Карим Али
3
Одна из проблем с отключением выбора (раскрывающегося списка) заключается в том, что в некоторых браузерах (например, IE9) теряется фокус. Это может быть проблемой, если элемент select отключается во время обработки вызова ajax, например, когда позиция пользователя в форме теряется.
Крис
1
Спасибо за ваше предложение. Просто вопрос; как сохранить раскрывающееся значение в скрытом поле? У вас есть пример кода для этого?
kramer65
2
Другой «обходной путь» - включить эти поля до отправки формы. Или в моем случае, когда я отправил данные в формате JSON (включить, получить данные, снова отключить): var disabled = $ (yourform) .find (': input: disabled'). RemoveAttr ('disabled'); var data = getFormJSONData ($ (ваша форма)); disabled.attr ('отключено', 'отключено');
KDT
4
Вы должны использовать prop()сейчас.
Alex
146
У меня была такая же проблема, я решил отключить все не выбранные параметры. С jQuery очень просто:
Изменить =>
Если у вас есть несколько раскрывающихся списков на одной странице, отключите все невыбранные параметры в идентификаторе выбора, как показано ниже.
Отличная идея! Чтобы использовать лучшие практики с текущими версиями jQuery, я бы использовал метод prop для установки значения disabled. ie$('option:not(:selected)').prop('disabled', true);
В той же строке, что и ваш ответ, я удалил другие параметры $ ('# cf_1268591 option: not (: selected)'). Remove ();
Сет Винтерс,
13
Я бы отключил поле. Затем, когда форма будет отправлена, не отключите ее. На мой взгляд, это проще, чем иметь дело со скрытыми полями.
//disable the field
$("#myFieldID").prop( "disabled", true );
//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
$("#myFieldID").prop( "disabled", false );
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#">Click here to enable readonly</a><select><option>Example 1</option><optionselected>Example 2</option><option>Example 3</option></select>
Отличный (крошечный) фрагмент кода, спасибо. Он отключает раскрывающиеся списки, поэтому их нельзя изменить, но все же позволяет отправлять их значения. Очень полезно.
Алекс Хопкинс
3
Эта строка делает выборку с readonlyатрибутом только для чтения:
Этот код сначала сохранит исходный выбор в каждом раскрывающемся списке. Затем, если пользователь изменит выбор, он вернет раскрывающийся список к исходному выбору.
//store the original selection
$("select :selected").each(function(){
$(this).parent().data("default", this);
});
//change the selction back to the original
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});
Это старая статья, но я хочу предупредить людей, которые ее найдут. Будьте осторожны с отключенным атрибутом с элементом got по имени. Странно, но вроде не так уж и хорошо.
Да, я знаю, что мне лучше использовать prop, а не attr, но, по крайней мере, теперь prop не будет работать из-за старой версии jquery, и теперь я не могу его обновить, не спрашивайте, почему ... разница html добавляется только id:. ..
Я обнаружил, что лучший способ сделать это - использовать CSS для удаления событий указателя и изменения прозрачности в раскрывающемся списке (попробуйте 0,5). Это дает пользователю впечатление, что он отключен как обычно, но все же отправляет данные.
Конечно, у этого есть некоторые проблемы с обратной совместимостью, но, на мой взгляд, это лучший вариант, чем обойти досадную проблему с отключенным / только для чтения.
Не существует раскрывающегося списка только для чтения. Что вы можете сделать, так это сбрасывать его до первого значения вручную после каждого изменения.
нехорошо, если выбранный в данный момент параметр не стоит первым в списке, как в этом примере: jsfiddle.net/4aHcD/19
Homer
@Homer, код предназначен для его сброса после любого изменения, и он работает в этом эффекте. Если по какой-то причине вы хотите, чтобы он запускался изначально вместо того, чтобы изменять начальное значение самостоятельно, вы всегда можете вызвать событие изменения в своем элементе после объявления события, используя $("select").change(), например, jsfiddle.net/4aHcD/20
Alex Turpin
2
при первой загрузке страницы, если выбран третий элемент и пользователь пытается изменить его на второй элемент, ваш код изменяет выбор на первый элемент. Я не думаю, что этого не должно быть. Вот пример того, что, я думаю, хотел OP, раскрывающееся меню, которое не изменит свое выбранное значение в зависимости от взаимодействия с пользователем: jsfiddle.net/4aHcD/22
Homer
То, что мне нужно, и то, что запрашивал OP, было способом сделать его доступным только для чтения. Это означает, что вы можете видеть выбранное значение или значения, но не можете их изменить. Это означает, что дисплей имитирует внешний вид редактируемого элемента управления без возможности его редактирования.
Suncat2000
0
Попробуйте сделать пустую строку при "нажатии клавиши вверх"
Вот небольшой вариант других ответов, в которых предлагается использовать disabled. Поскольку атрибут disabled может иметь любое значение и при этом отключаться, вы можете установить его в значение только для чтения, например disabled = "readonly". Это отключит элемент управления как обычно, а также позволит вам легко стилизовать его иначе, чем обычные отключенные элементы управления, с помощью CSS, например:
select[disabled=readonly] {
.... styles you likeforread-only
}
Если вы хотите, чтобы данные были включены в отправку, используйте скрытые поля или включите перед отправкой, как подробно описано в других ответах.
Как сказал @Kanishka, если мы отключим элемент формы, он не будет отправлен. Я создал отрывок для этой проблемы. Когда элемент выбора отключен, он создает скрытое поле ввода и сохраняет значение. Когда он включен, он удаляет созданные скрытые поля ввода.
jQuery(document).ready(function($) {
var $dropDown = $('#my-select'),
name = $dropDown.prop('name'),
$form = $dropDown.parent('form');
$dropDown.data('original-name', name); //store the name in the data attribute
$('#toggle').on('click', function(event) {
if ($dropDown.is('.disabled')) {
//enable it
$form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
$dropDown.removeClass('disabled') //remove disable class
.prop({
name: name,
disabled: false
}); //restore the name and enable
} else {
//disable it var $hiddenInput = $('<input/>', {
type: 'hidden',
name: name,
value: $dropDown.val()
});
$form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field
$dropDown.addClass('disabled') //disable class
.prop({
'name': name + "_1",
disabled: true
}); //change name and disbale
}
});
});
Ответы:
$('#cf_1268591').attr("disabled", true);
раскрывающийся список всегда доступен только для чтения. что вы можете сделать, так это отключить его
если вы работаете с формой, отключенные поля не отправляются, поэтому используйте скрытое поле для хранения отключенного раскрывающегося значения
источник
prop()
сейчас.У меня была такая же проблема, я решил отключить все не выбранные параметры. С jQuery очень просто:
$('option:not(:selected)').attr('disabled', true);
Изменить => Если у вас есть несколько раскрывающихся списков на одной странице, отключите все невыбранные параметры в идентификаторе выбора, как показано ниже.
$('#select_field_id option:not(:selected)').attr('disabled', true);
источник
$('option:not(:selected)').prop('disabled', true);
Это то, что вы ищете:
$('#cf_1268591').attr("style", "pointer-events: none;");
Работает как шарм.
источник
tabindex="-1"
Попробуйте вот это .. не отключая выбранное значение ..
$('#cf_1268591 option:not(:selected)').prop('disabled', true);
Меня устраивает..
источник
Я бы отключил поле. Затем, когда форма будет отправлена, не отключите ее. На мой взгляд, это проще, чем иметь дело со скрытыми полями.
//disable the field $("#myFieldID").prop( "disabled", true ); //right before the form submits, we re-enable the fields, to make them submit. $( "#myFormID" ).submit(function( event ) { $("#myFieldID").prop( "disabled", false ); });
источник
Установка элемента с
disabled
не будет отправлять данные, однакоselect
элементы не имеютreadonly
.Вы можете моделировать
readonly
наselect
использование CSS для укладки и JS для предотвращения изменения с вкладкой:select[readonly] { background: #eee; pointer-events: none; touch-action: none; }
Затем используйте это как:
var readonly_select = $('select'); $(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) { $(i.target).val($(this).attr('data-original-value')); });
Результат:
Показать фрагмент кода
// Updated 08/2018 to prevent changing value with tab $('a').on('click', function() { var readonly_select = $('select'); $(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) { $(i.target).val($(this).attr('data-original-value')); }); });
select[readonly] { background: #eee; pointer-events: none; touch-action: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Click here to enable readonly</a> <select> <option>Example 1</option> <option selected>Example 2</option> <option>Example 3</option> </select>
источник
Простой jquery для удаления невыбранных параметров.
$('#your_dropdown_id option:not(:selected)').remove();
источник
Чтобы упростить задачу, вот плагин jQuery, который делает это без лишних хлопот: https://github.com/haggen/readonly
источник
Эта строка делает выборку с
readonly
атрибутом только для чтения:$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);
источник
Этот код сначала сохранит исходный выбор в каждом раскрывающемся списке. Затем, если пользователь изменит выбор, он вернет раскрывающийся список к исходному выбору.
http://jsfiddle.net/4aHcD/22/
//store the original selection $("select :selected").each(function(){ $(this).parent().data("default", this); }); //change the selction back to the original $("select").change(function(e) { $($(this).data("default")).prop("selected", true); });
источник
Самым простым вариантом для меня было сделать выбор только для чтения и добавить:
onmousedown="return false" onkeydown="return false"
Никакой лишней логики писать не нужно. Нет скрытых входов или отключены, а затем снова включены при отправке формы.
источник
Это старая статья, но я хочу предупредить людей, которые ее найдут. Будьте осторожны с отключенным атрибутом с элементом got по имени. Странно, но вроде не так уж и хорошо.
это не работает:
<script language="JavaScript"> function onChangeFullpageCheckbox() { $('name=img_size').attr("disabled",$("#fullpage").attr("checked")); </script>
эта работа:
<script language="JavaScript"> function onChangeFullpageCheckbox() { $('#img_size').attr("disabled",$("#fullpage").attr("checked")); </script>
Да, я знаю, что мне лучше использовать prop, а не attr, но, по крайней мере, теперь prop не будет работать из-за старой версии jquery, и теперь я не могу его обновить, не спрашивайте, почему ... разница html добавляется только id:. ..
<select name="img_size" class="dropDown" id="img_size"> <option value="200">200px </option><option value="300">300px </option><option value="400">400px </option><option value="500">500px </option><option value="600" selected="">600px </option><option value="800">800px </option><option value="900">900px </option><option value="1024">1024px </option></select> <input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />
...
Я не обнаружил ошибок в скрипте, а в версии с именем ошибок в консоли не было. Но, конечно, это может быть моя ошибка в коде
Видно: Chrome 26 на Win 7 Pro
Простите за плохую грамматику.
источник
Я обнаружил, что лучший способ сделать это - использовать CSS для удаления событий указателя и изменения прозрачности в раскрывающемся списке (попробуйте 0,5). Это дает пользователю впечатление, что он отключен как обычно, но все же отправляет данные.
Конечно, у этого есть некоторые проблемы с обратной совместимостью, но, на мой взгляд, это лучший вариант, чем обойти досадную проблему с отключенным / только для чтения.
источник
Вы также можете отключить его, и в тот момент, когда вы делаете вызов отправки, включите его. Думаю, это самый простой способ :)
источник
Работает очень хорошо
$('#cf_1268591 option:not(:selected)').prop('disabled', true);
Здесь я вижу варианты, но не могу их выбрать
источник
Не существует раскрывающегося списка только для чтения. Что вы можете сделать, так это сбрасывать его до первого значения вручную после каждого изменения.
$("select").change(function(event) { $(this).val($(this).find("option").first().val()); });
http://jsfiddle.net/4aHcD/
источник
$("select").change()
, например, jsfiddle.net/4aHcD/20Попробуйте сделать пустую строку при "нажатии клавиши вверх"
HTML это:
<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">
JQuery:
$("#cf_1268591").combobox({ url:"your url", valueField:"id", textField:"text", panelWidth: "350", panelHeight: "200", });
// делаем после нажатия клавиши с пустой строкой
var tb = $("#cf_1268591").combobox("textbox"); tb.bind("keyup",function(e){ this.value = ""; });
источник
Может ты можешь попробовать этот способ
function myFunction() { $("select[id^=myID]").attr("disabled", true); var txtSelect = $("select[id^=myID] option[selected]").text(); }
Это устанавливает первое значение раскрывающегося списка по умолчанию, и оно кажется только для чтения
источник
html5 поддерживает:
` $("#cCity").attr("disabled", "disabled"); $("#cCity").addClass('not-allow');
`
источник
Вот небольшой вариант других ответов, в которых предлагается использовать disabled. Поскольку атрибут disabled может иметь любое значение и при этом отключаться, вы можете установить его в значение только для чтения, например disabled = "readonly". Это отключит элемент управления как обычно, а также позволит вам легко стилизовать его иначе, чем обычные отключенные элементы управления, с помощью CSS, например:
select[disabled=readonly] { .... styles you like for read-only }
Если вы хотите, чтобы данные были включены в отправку, используйте скрытые поля или включите перед отправкой, как подробно описано в других ответах.
источник
Как сказал @Kanishka, если мы отключим элемент формы, он не будет отправлен. Я создал отрывок для этой проблемы. Когда элемент выбора отключен, он создает скрытое поле ввода и сохраняет значение. Когда он включен, он удаляет созданные скрытые поля ввода.
Больше информации
jQuery(document).ready(function($) { var $dropDown = $('#my-select'), name = $dropDown.prop('name'), $form = $dropDown.parent('form'); $dropDown.data('original-name', name); //store the name in the data attribute $('#toggle').on('click', function(event) { if ($dropDown.is('.disabled')) { //enable it $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any $dropDown.removeClass('disabled') //remove disable class .prop({ name: name, disabled: false }); //restore the name and enable } else { //disable it var $hiddenInput = $('<input/>', { type: 'hidden', name: name, value: $dropDown.val() }); $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field $dropDown.addClass('disabled') //disable class .prop({ 'name': name + "_1", disabled: true }); //change name and disbale } }); });
/*Optional*/ select.disabled { color: graytext; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" name="my-form"> <select id="my-select" name="alpha"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </form> <br/> <button id="toggle">toggle enable/disable</button>
источник