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

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

i have 5 drop downs having id element named box_g1, box_g2, box_g3, box_g4 , box_g5. want enable disabled values in combo boxes id selector starting 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 line enable values in boxes 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 help out on this. check function defaultvalues(). have mentioned comment.

you can enable options with:

$('select[id^="box_g"] option').prop("disabled",false);

but selects still disabled due lines next in code

javascript jquery