How to Disable the combobox values on selection in multiple comboboxes JQuery?

0
votes

I want to disable the values in combobox on selection for multiple comboboxes. Like i have a four combobox1, combobox2, combobox3, combobox4 with values Select,1,2,3,4 and 5. Now, if i select value '1' from combobox1, then it should be disabled from all other comboboxes. And then if i select '2' from combobox2, then it should be disabled in combobox1 and combobox3 with value '1' disabled in combobox3 also.

More clearly :

  • Combobox1 - selected - value '1'
  • Combobox2 - selected - value '2'
  • Combobox3 - selected - value '3'

Now the result should be :

  • Combobox1 - Disabled values - '2','3' but not 1/3/4/5

  • Combobox2 - Disabled values - '1','3' but not 3/4/5

  • Combobox3 - Disabled values - '1','2' but not 3/4/5

  • Combobox4 - Disabled values - '1','2','3' but not 4/5

EDIT

If Combobox1 is selected with Option "Select" then it should disable all the other combobxes except combobox1 and reset all the values with 0 index for all other comboboxes.

But what happening with the code, when i select value 1 from combobox it is disabled for combobox 2 and 3, but when selecting value '2' from combobox2, the value '1' combobox3 gets enabled.

Here is what i have done so far :

HTML Code : 

<head>
    <title>Language test page</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<select name="g1" id="select_g1">
    <option value="select1">Select</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

<select name="g2" id="select_g2">
<option value="select2">Select</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

<select name="g3" id="select_g3">
<option value="select3">Select</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>



</body>

</html>

JQuery Code :

<script>
    $(document).ready(function(){
        $('select').on('change', function (e) {
            $('select option').prop('disabled', false);
            var optionSelected = $("option:selected", this);

            var valueSelected = this.value;

            $("select option:contains('" + valueSelected + "')").each(function(){
                if(valueSelected === this.value){
                    this.disabled = true;
                }else{
                    this.disabled = false;
                }
            });
        });
    });
</script>

Any help is appreciated.

3
javascriptjquerycombobox

3 Answers

2
votes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript">


    $(document).ready(function(){
        $("select").on("change", function(e){
            e.preventDefault();         
            console.log($(this).val());
            var valueSelected = $(this).val()
            $("select option:contains('" + valueSelected + "')").prop("disabled", true);
        });
    });

</script>





</head>

<body>



<select name="g1">
    <option value="select1">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="g2">
<option value="select2">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="g3">
<option value="select3">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>   

<select name="g4">
<option value="select4">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>   



</body>
</html>
0
votes

Did you tried with this.prop('disabled', false) ?

0
votes

This disable de option in other "select"

$(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;
                    }

                }


            })

        })
    });