selecting the dropdowns having id selector starting with some string

selecting the dropdowns having id selector starting with some string - javascript

I have five drop downs having the id element named as box_g1, box_g2, box_g3, box_g4 and box_g5. I want to enable all the disabled values in all the combo boxes with id selector starting with box_g.
HTML :
<select name="n1" id="box_g1">
<option value="Default">Default</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n2" id="box_g2" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n3" id="box_g3" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n4" id="box_g4" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<select name="n5" id="box_g5" disabled="disabled">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
JQuery :
$(document).ready(function(){
$("select").change(function(e){
var id = $(this).attr("id");
var value = this.value;
$("select option").each(function(){
var idParent = $(this).parent().attr("id");
if(id != idParent){
if(this.value == value){
this.disabled = true;
}
else if($("#box_g1 option:selected").val()!="Default"){
$("#box_g2").prop("disabled", false);
$("#box_g3").prop("disabled", false);
$("#box_g4").prop("disabled", false);
$("#box_g5").prop("disabled", false);
}else{
/*$("#box_g1").each(function(){
$("#box_g1 option").removeAttr("disabled",false);
});
$("#box_g2").prop("disabled",true).val('Disabled');
$("#box_g3").prop("disabled",true).val('Disabled');
$("#box_g4").prop("disabled",true).val('Disabled');
$("#box_g5").prop("disabled",true).val('Disabled');*/
defaultValues();
}
}
});
});
});
function defaultValues() {
if ($("#box_g1").val() == "Default") {
$("select[id^='box_g']").removeAttr("disabled",false); // added this line to enable all the values in all boxes but they are still disabled.
$("#box_g2").attr("disabled", true).val('Disabled');
$("#box_g3").attr("disabled", true).val('Disabled');
$("#box_g4").attr("disabled", true).val('Disabled');
$("#box_g5").attr("disabled", true).val('Disabled');
} else {
$("#box_g2").attr("disabled", false);
$("#box_g3").attr("disabled", false);
$("#box_g4").attr("disabled", false);
$("#box_g5").attr("disabled", false);
}
}
Can anyone help out on this. Check the function defaultValues(). I have mentioned the comment.

You can enable all the options with:
$('select[id^="box_g"] option').prop("disabled",false);
but the selects will still be disabled due to the lines following in your code

If you want enable all select boxes whos od start whith 'box_g' you can use this
$("select[id^='box_g']").find("option").prop("disabled",false);

Related

How can I update the value of my selection

I am making a piano website that makes random melodies based on their scales. But when I choose a certain key and/or scale and/or mode(different kind of scale), the dropdown doesn't update in JS.
JS Code:
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
console.log(specifiedNote, majorMinor, mode);
}, 4000);
HTML Code:
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
If you look at the console, you'll see the value is the same over 10
times, but the values in the drop downs are different. How do I fix this?

You must read the element again in the the interval function :
setInterval(()=>{
specifiedNote = document.querySelector('#keys').value;
majorMinor = document.querySelector('#types').value;
mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);

You must be reading the value inside the timeout.
Or another method you can do is, make a change event handler for the selects instead of the setTimeout, so the functions work when the select boxes are changed, not periodically.
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>

Get Values Inside your set interval code like below.
setInterval(()=>{
let specifiedNote = document.querySelector('#keys').value;
let majorMinor = document.querySelector('#types').value;
let mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
},

Disable Option 2 when Option 1 is selected

I need to adapt some code I've used for a website I'm creating for a school I work for, to disallow certain options to be selected at the same time.
The user is presented the following HTML drop down list 6 times:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
The user should NOT be able to select both Art and Textiles at the same time. They can select EITHER Art OR Textiles - but not both.
For example: User selects 'Art' in opt1, so Textiles is disabled in the remaining 5 menus. If the user goes back and deselects Art, Textiles should then be enabled throughout. Hopefully you understand what I mean.
I already have the code to prevent the same option being selected multiple times:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
The user then clicks submit and all of this is then submit to a MySQL server for review at a later date.
Menus are named opt1, opt2, opt3, opt4, optRes1 and optRes2.
Thanks everyone,
Jack

I use a data attribute named notallowed. There you can set which value that should be disabled. And when a value is changed we also check if we previously disabled some fields and re-enable them.
$('select').change(function(){
var notAllowed = $(this).find('option:selected').data('notallowed');
var currentValue = $(this).val();
// Get the previous selected value.
var oldValue = $(this).data('old');
// Keep track of the previous selected value.
$(this).data('old', currentValue);
// Re-enabled all that was disabled by the previous selection.
if(oldValue) {
// Re-enable the old value in the other selects.
$('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
// Get the option.
var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
if(previousNotAllowed){
$('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
}
}
// If we selected a option with notallowed attribute we should disable that option in the other selects.
if(notAllowed){
var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
}
// Disable the current value in other selects.
$('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>

Try to add a overlapping div with id selection and then select every select and disable the chosen option on change like so:
<div id="selection">
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
</div>
and the script
<script type="text/JavaScript" language="JavaScript">
$( "#optRes2" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes2').val() ){
$(this).attr("disabled","true");
}
});
});
$( "#optRes3" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes3').val() ){
$(this).attr("disabled","true");
}
});
});
</script>

Better create options array, and work with data, not with HTML. Using this approach you will be able to stay DRY.
Think solution is clear.
<html>
<body>
<select type="select" name="optRes3" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<script>
function OptResDropdown(htmlDropdown, value) {
this.value = value;
this.dropdown = htmlDropdown;
this.options = this.initOptions(htmlDropdown.options);
var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
this.value = value? value : (selected ? selected.value : 0);
var me = this;
htmlDropdown.addEventListener('change', function(event){
me.value = event.target.value;
me.update(me.value);
});
this.update();
}
OptResDropdown.instances = {};
OptResDropdown.prototype.initOptions = function(options){
var me = this;
var out = [];
for(var i = 0; i < options.length; i++) {
var option = options[i];
out.push({value: option.value, label: option.innerText});
}
return out;
};
OptResDropdown.prototype.update = function(value) {
for(var key in OptResDropdown.instances) {
var me = OptResDropdown.instances[key];
me.dropdown.innerHTML = '';
var options;
if(value === 'Art') {
options = me.options.filter(function(option){
return option.value !== 'Textiles';
});
} else if(value === 'Textiles') {
options = me.options.filter(function(option){
return option.value !== 'Art';
});
} else {
options = me.options;
}
options.forEach(function(option){
var opt = document.createElement('option');
opt.value = option.value;
opt.innerText = option.label;
me.dropdown.appendChild(opt);
})
me.dropdown.value = me.value;
}
};
var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);
OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;
</script>
</body>
</html>

Disable multiple options from dropdown list using javascript

I have following options in dropdown list.
<select>
<option value="FRUIT">FRUIT</option>
<option value="MANGO">MANGO</option>
<option value="APPLE">APPLE</option>
<option value="BANANA">BANANA</option>
<option value="GRADES">GRADES</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
I want to disable(readonly) FRUIT and GRADES permanently. How can I achieve this result using javascript ?

<select name="selectField"> <option value="FRUIT" disabled>FRUIT</option>
<option value="MANGO">
MANGO
</option>
<option value="APPLE">
APPLE
</option>
<option value="BANANA">BANANA</option>
<option value="GRADES" disabled>GRADES</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
hope so this one helps.just try this one!

You should use "disabled" attribute.
For example:
<option value="FRUIT" disabled>FRUIT</option>
<option value="GRADES" disabled>GRADES</option>
If you are using jQuery in your page, so follow the below codes:
<script>
function myFunction() {
document.getElementById("mySelect").disabled = true;
}
</script>
Your html code should be like:
<option id="mySelect" value="FRUIT" disabled>FRUIT</option>
<option id="mySelect" value="GRADES" disabled>GRADES</option>

You need to use optgroup inside select. The <optgroup> is used to group related options in a drop-down list. Chek this.
Your example should be like
optgroup[readonly] {
background-color: #eeeeee;
color: #555555;
}
<select>
<optgroup label="FRUIT" readonly="readonly">
<option value="MANGO">MANGO</option>
<option value="APPLE">APPLE</option>
<option value="BANANA">BANANA</option>
</optgroup>
<optgroup label="GRADES" disabled="disabled">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
</select>
Also readonly options are still submittable.

enable a disabled select when choose a value in another select tag

I have these two select tag:
<select>
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
As you can see, my second select have the disabled attribute. I would like in javascript, when I selected the option "car" in my first select, the second select with the car's choice become enabled to make a choice.
How can I proceed in javascript?

JavaScript Version:
document.getElementById("one").onchange = function () {
document.getElementById("two").setAttribute("disabled", "disabled");
if (this.value == 'car')
document.getElementById("two").removeAttribute("disabled");
};
<select id="one">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select disabled id="two">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
jQuery Version:
$('#one').change(function() {
$('#two').prop('disabled', true);
if ($(this).val() == 'car') {
$('#two').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="one">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select id="two" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Put ids on your selects to easily target them
In the handler, by default, disable the second select element
If the current val of the first select is car, then set disabled to false
$('#AutoType').change(function() {
$('#Model').prop('disabled', true);
if ($(this).val() == 'car') {
$('#Model').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="AutoType">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select id="Model" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Try this:
<form id="creation" name="creation" onchange="handleSelect()">
<select name="select01" id="select01">>
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select name="select02" id="select02" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
function handleSelect() {
if (this.value == '01') {
document.getElementById('select02').disabled = true;
} else {
document.getElementById('select02').disabled = false;
}
}

You need to assign an id to you select element like:
<select id="my-input-id" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
document.getElementById('my-input-id').disabled = false;

Do you want to simply use a frontend framework such as Angular or React.js or Ember?? It's much easier if you want to do something complicated.
A demo is as follows:
http://jsfiddle.net/PxdSP/2244/
All you need to do is include angular.js in your website
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
You can then assign logic to the controller and decide what you want to do with the select or divs.

How to Select first index of first combobox and disable other comboboxes and reset the values of other combobox with jQuery?

I have three combobxes. All comboboxes have values : "Select","one","two""three"
Here is the screnario :
If "Select" is selected from First Combobox, then it should disable all the comboboxes and reset the values to their first index.
jQuery
$("select").change(function(e){
if($("#box_g1 option:selected").prop("selectedIndex",0)){
$("#box_g2").attr("disabled", true);
$("#box_g3").attr("disabled", true);
// and so on
$("#box_g5").attr("disabled", true);
}
});
HTML
<select name="n1" id="box_g1">
<option value="Select">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="n2" id="box_g2">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="n3" id="box_g3">
<option value="Disabled">Disabled</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Here box_g1 is first combobox. And disabling other comboboxes from 2 to 5.

Try this:
$("select").change(function(e){
if($("#box_g1").val() == "Select"){
$("#box_g2").attr("disabled", "disabled");
$("#box_g3").attr("disabled", "disabled");
// and so on
$("#box_g5").attr("disabled", "disabled");
}
});
DEMO FIDDLE

We Keep Coding

JavaScript is the programming language of the Web.

selecting the dropdowns having id selector starting with some string - javascript

You can enable all the options with: $('select[id^="box_g"] option').prop("disabled",false); but the selects will still be disabled due to the lines following in your code

If you want enable all select boxes whos od start whith 'box_g' you can use this $("select[id^='box_g']").find("option").prop("disabled",false);

Related

How can I update the value of my selection

Disable Option 2 when Option 1 is selected

Disable multiple options from dropdown list using javascript

enable a disabled select when choose a value in another select tag

How to Select first index of first combobox and disable other comboboxes and reset the values of other combobox with jQuery?

Categories

Resources