AllramEst AllramEst - 2 months ago 17
Javascript Question

Disable selectlsit item not working as intended

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 Source

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>