Disable select option with javascript

Как я могу отключить в на основе его значения в JavaScript?

У меня есть с количеством с. Каждый имеет уникальную ценность. Мне нужно отключить с заданным определенным значением (не innerhtml).

У кого-нибудь есть идея, как?

6 ответов

Чистый Javascript

С чистым Javascript вам придется циклически просматривать каждую опцию и проверять ее значение в отдельности.

// Get all options within . var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) < // lowercase comparison for case-insensitivity (op[i].value.toLowerCase() == "stackoverflow") ? op[i].disabled = true : op[i].disabled = false ; >

Без включения нецелевых элементов:

// Get all options within . var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) < // lowercase comparison for case-insensitivity if (op[i].value.toLowerCase() == "stackoverflow") < op[i].disabled = true; >> 

JQuery

С помощью jQuery вы можете сделать это одной строкой:

$("option[value='stackoverflow']") .attr("disabled", "disabled") .siblings().removeAttr("disabled"); 

Без включения нецелевых элементов:

$("option[value='stackoverflow']").attr("disabled", "disabled"); 

Обратите внимание, что не не учитывает регистр. «StackOverflow» не будет равняться «stackoverflow». Чтобы получить нечувствительное к регистру совпадение, вам придется циклически перебирать каждое из них, преобразовывать значение в нижний регистр, а затем проверять это:

Без включения нецелевых элементов:

По некоторым причинам другие ответы неоправданно сложны, это легко сделать в одной строке в чистом JavaScript:

Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true; 

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true; 

Производительность зависит от количества параметров (чем больше параметров, тем медленнее первый) и от того, можете ли вы опустить escaping (вызов replace ) из второго. Также первая использует функции Array.find и стрелки, которые недоступны в IE11.

Установите id для опции, затем используйте get element by id и отключите его, когда значение x было выбрано.

  4TB 900GB 300GB   var perfType = document.getElementById("driveRPM").value; if(perfType == "7200")< document.getElementById("driveCapacity").value = "4000.0"; document.getElementById("4000").disabled = false; >else 

Вы также можете использовать эту функцию,

function optionDisable(selectId, optionIndices) < for (var idxCount=0; idxCount> 

var vals = new Array( 2, 3, 5, 8 ); select_disable_options('add_reklamaciq_reason',vals); select_disable_options('add_reklamaciq_reason'); function select_disable_options(selectid,vals) < var selected = false ; $('#'+selectid+' option').removeAttr('selected'); $('#'+selectid+' option').each(function(i,elem)< var elid = parseInt($(elem).attr('value')); if(vals)< if(vals.indexOf(elid) != -1)< $(elem).removeAttr('disabled'); if(selected == false)< $(elem).attr('selected','selected'); selected = true ; >>else < $(elem).attr('disabled','disabled'); >>else < $(elem).removeAttr('disabled'); >>); > 

Здесь с JQ .. если кто-нибудь ищет его

Я также хотел бы дать вам идею отключить с заданным определенным значением ( not innerhtml ). Я рекомендую это с jQuery , чтобы получить самый простой способ. Смотрите мой образец ниже.

Status: 
 Hand Typed Printed  
 

Javascript

Идея в том, как отключить параметр Printed , если текущим Status является Hand

var status = $('#option').find('.status');//to get current the selected value var op = status.find('option');//to get the elements for disable attribute (status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false; 

Вы можете увидеть, как это работает, здесь:

Источник

HTMLSelectElement: disabled property

The HTMLSelectElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

Value

Examples

HTML

label> Allow drinks? input id="allow-drinks" type="checkbox" /> label> label for="drink-select">Drink selection:label> select id="drink-select" disabled> option value="1">Wateroption> option value="2">Beeroption> option value="3">Pepsioption> option value="4">Whiskyoption> select> 

JavaScript

const allowDrinksCheckbox = document.getElementById("allow-drinks"); const drinkSelect = document.getElementById("drink-select"); allowDrinksCheckbox.addEventListener( "change", (event) =>  drinkSelect.disabled = !event.target.checked; >, false, ); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML/JavaScript — Disable Select Box

Sometimes it is necessary to prevent the user from changing the value of a select box. The HTML 4.0 specification defines the DISABLE attribute for the SELECT tag. This attribute can be accessed with the JavaScript disable read/write property.

Other Form elements also have the disable attribute/property. This includes BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

Example syntax to disable a select box via HTML

Example syntax to disable a multiple select box via HTML

Compatibility

2002-02-06 — The «Try It» example has been tested and works in Internet Explorer 5.0 and Netscape 6.1. It has been tested and does not work in Netscape 4.74. The disable attribute/property should work in any browser that supports HTML 4.0 and W3C DOM Level 1.

2004-09-27 — Tested again with newer browsers. Works in Firefox 1.0PR, Mozilla 1.7.3, Netscape 7.1, Opera 7.54, and IE 6.0.

IE

W3.org

«Try It» Source

Public Domain

The HTML and JavaScript listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

Below is a full example of the «Try It» at the top of this page. It shows how to enable/disable a Select box dynamically with JavaScript. Included is a checkbox that uses the click event to enable/disable the select box.

Источник

Как отключить в на основе его значения в JavaScript?

С чистым Javascript вам придется перебирать каждую опцию и проверять ее значение индивидуально.

// Get all options within . var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) < // lowercase comparison for case-insensitivity (op[i].value.toLowerCase() == "stackoverflow") ? op[i].disabled = true : op[i].disabled = false ; >

Без включения нецелевых элементов:

// Get all options within . var op = document.getElementById("foo").getElementsByTagName("option"); for (var i = 0; i < op.length; i++) < // lowercase comparison for case-insensitivity if (op[i].value.toLowerCase() == "stackoverflow") < op[i].disabled = true; >> 

JQuery

С помощью jQuery вы можете сделать это с помощью одной строки:

$("option[value='stackoverflow']") .attr("disabled", "disabled") .siblings().removeAttr("disabled"); 

Без включения нецелевых элементов:

$("option[value='stackoverflow']").attr("disabled", "disabled"); 

Обратите внимание, что это не зависит от регистра. «StackOverflow» не будет равно «stackoverflow». Чтобы получить совпадение без учета регистра, вам придется циклически переключаться между ними, преобразовывая значение в нижний регистр, а затем проверять на это:

Без включения нецелевых элементов:

Источник