禁用selectlsit项目无法正常工作

Question

I have a problem with my "select" list. I have three and they all have the same values. if one value is selected in one of the lists it is disabled in the other two selectlists. But when I select Monday = "Måndag" It disables Monday and The last four items. I get the same behavior from all the selectlists. What am I doing wrong?

 $("#Förstahandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Andrahandsval option[value*=" + newValue + "]").prop('disabled', true); $("#Tredjehandsval option[value*=" + newValue + "]").prop('disabled', true); //Av selecterar förra valet i de andra dropdowns $("#Andrahandsval option[value*=" + prevValue + "]").prop('disabled', false); $("#Tredjehandsval option[value*=" + prevValue + "]").prop('disabled', false); }); //----------------------------------------------------- $("#Andrahandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Förstahandsval option[value*=" + newValue + "]").prop('disabled', true); $("#Tredjehandsval option[value*=" + newValue + "]").prop('disabled', true);; //Av selecterar förra valet i de andra dropdowns $("#Förstahandsval option[value*=" + prevValue + "]").prop('disabled', false); $("#Tredjehandsval option[value*=" + prevValue + "]").prop('disabled', false); }); //-------------------------------------------------------------------------- $("#Tredjehandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Andrahandsval option[value*=" + newValue + "]").prop('disabled', true); $("#Förstahandsval option[value*=" + newValue + "]").prop('disabled', true); //Av selecterar förra valet i de andra dropdowns $("#Andrahandsval option[value*=" + prevValue + "]").prop('disabled', false); $("#Förstahandsval option[value*=" + prevValue + "]").prop('disabled', false); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="FörstahandsvalHidden" type="text" name="Förstahandsval" value="" hidden /> <div class="form-group"> <label for="Förstahandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Förstahandsval"> <option value="0">Förstahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div> <!-- Val2 --> <input id="AndrahandsvalHidden" type="text" name="Andrahandsval" value="" hidden /> <div class="form-group"> <label for="Andrahandsval">Andrahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Andrahandsval"> <option value="0">Andrahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option>> </select> </div> <!-- Val3 --> <input id="TredjehandsvalHidden" type="text" name="Tredjehandsval" value="" hidden /> <div class="form-group"> <label for="Tredjehandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Tredjehandsval"> <option value="0">Tredjehandval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div> 

Answer 1

Remove the * signs when checking the values. This option[value=*" + newValue + "] needs to be option[value=" + newValue + "] . Putting a star sign makes it contains instead of equals .

 $("#Förstahandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Andrahandsval option[value=" + newValue + "]").prop('disabled', true); $("#Tredjehandsval option[value=" + newValue + "]").prop('disabled', true); //Av selecterar förra valet i de andra dropdowns $("#Andrahandsval option[value=" + prevValue + "]").prop('disabled', false); $("#Tredjehandsval option[value=" + prevValue + "]").prop('disabled', false); }); //----------------------------------------------------- $("#Andrahandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Förstahandsval option[value=" + newValue + "]").prop('disabled', true); $("#Tredjehandsval option[value=" + newValue + "]").prop('disabled', true);; //Av selecterar förra valet i de andra dropdowns $("#Förstahandsval option[value=" + prevValue + "]").prop('disabled', false); $("#Tredjehandsval option[value=" + prevValue + "]").prop('disabled', false); }); //-------------------------------------------------------------------------- $("#Tredjehandsval").focusin(function() { $(this).data('val', $(this).val()); }) .change(function() { var newValue = this.value; var prevValue = $(this).data('val'); //Gör vald tid ovalbar i de andra dropdown $("#Andrahandsval option[value=" + newValue + "]").prop('disabled', true); $("#Förstahandsval option[value=" + newValue + "]").prop('disabled', true); //Av selecterar förra valet i de andra dropdowns $("#Andrahandsval option[value=" + prevValue + "]").prop('disabled', false); $("#Förstahandsval option[value=" + prevValue + "]").prop('disabled', false); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="FörstahandsvalHidden" type="text" name="Förstahandsval" value="" hidden /> <div class="form-group"> <label for="Förstahandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Förstahandsval"> <option value="0">Förstahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div> <!-- Val2 --> <input id="AndrahandsvalHidden" type="text" name="Andrahandsval" value="" hidden /> <div class="form-group"> <label for="Andrahandsval">Andrahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Andrahandsval"> <option value="0">Andrahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option>> </select> </div> <!-- Val3 --> <input id="TredjehandsvalHidden" type="text" name="Tredjehandsval" value="" hidden /> <div class="form-group"> <label for="Tredjehandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Tredjehandsval"> <option value="0">Tredjehandval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div> 

Answer 2

You could achieve that simply using the following code :

$("select").on('change', function(){
    $('select option').removeAttr('disabled');
    $('select').not($(this)).find('[value='+$(this).val()+']').prop('disabled','disabled');
});

NOTE :

• First line remove the disabled flag from all the option when you select any new option from the select list.

• The second line disable the option in the other selects except the active one. Hope this helps.

 $("select").on('change', function(){ $('select option').removeAttr('disabled'); $('select').not($(this)).find('[value='+$(this).val()+']').prop('disabled','disabled') }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="FörstahandsvalHidden" type="text" name="Förstahandsval" value="" hidden /> <div class="form-group"> <label for="Förstahandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Förstahandsval"> <option value="0">Förstahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div> <!-- Val2 --> <input id="AndrahandsvalHidden" type="text" name="Andrahandsval" value="" hidden /> <div class="form-group"> <label for="Andrahandsval">Andrahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Andrahandsval"> <option value="0">Andrahandsval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option>> </select> </div> <!-- Val3 --> <input id="TredjehandsvalHidden" type="text" name="Tredjehandsval" value="" hidden /> <div class="form-group"> <label for="Tredjehandsval">Förstahandsval:</label> <i class="fa fa-info-circle" aria-hidden="true"></i> <select class="form-control" id="Tredjehandsval"> <option value="0">Tredjehandval</option> <option value="1">Måndag - 19:15-20:15</option> <option value="2">Måndag - 20:15-21:15</option> <option value="3">Tisdag - 19:15-20:15</option> <option value="4">Tisdag - 20:15-21:15</option> <option value="5">Onsdag - 19:15-20:15</option> <option value="6">Onsdag - 20:15-21:15</option> <option value="7">Torsdag - 19:15-20:15</option> <option value="8">Torsdag - 20:15-21:15</option> <option value="9">Fredag - 19:15-20:15</option> <option value="10">Fredag - 20:15-21:15</option> <option value="11">Lördag - 10:00-11:00</option> <option value="12">Lördag - 11:00-12:00</option> <option value="13">Söndag - 10:00-11:00</option> <option value="14">Söndag - 11:00-12:00</option> </select> </div>