CODEWITHSUNDEEP
javascriptjquery
Jovs
Jovs

Reputation: 892

Disable one option in select element and enable the others

I have two select element with same options. I want to disable the option if its already selected in other select element.

Here is my two select:

<select class="form-control col-md-12" name="student1" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

<select class="form-control col-md-12" name="student2" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

Here's example of my javascript(but this will not do)

$("select[name=student1]").change(function(){
    if ( $(this).val() == 'John' ) {
        $("select[name=student2]")
        .children('option[value=' + this.val() + ']')
        .attr('disabled', true);
    }
});

I know how to do it using if statement and disable and enable the option element but I will use database on this one and I want to know the easiest way to do this or if I can just disable one and automatically enable the others.

If I just put the disable then I change the selected option the option that got disabled will stay disabled and I need to enable them all to secure that they're enable.

I hope you get it. Any help will be appreciated!

EDIT

I will use database with value of option this is just example so I want to know how to enable and disable them without knowing what is the value.

Upvotes: 0

Views: 1027

Answers (2)

maazadeeb
maazadeeb

Reputation: 6112

Your problem is still not very clear. But I assume it's that you're not aware of the values and you want to keep the selects in sync. You can try this

$("select[name='student1']").change(function() {
  const currentVal = $(this).val();
  $("select[name='student2'] option").each(function() {
    const student2Val = $(this).val();
    if (student2Val === currentVal) {
      $(this).attr('disabled', true);
      $(this).attr('selected', true);
    } else {
      $(this).attr('disabled', false);
      $(this).attr('selected', false);
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control col-md-12" name="student1" required>
  <option value="" disabled selected>Select Student</option>
  <option value="0">John</option>
  <option value="1">Paul</option>
</select>

<select class="form-control col-md-12" name="student2" required>
  <option value="" disabled selected>Select Student</option>
  <option value="0">John</option>
  <option value="1">Paul</option>
</select>

You will have to do the syncing from select2 to select1 yourself.

Upvotes: 1

Christian Carrillo
Christian Carrillo

Reputation: 2761

I guess that you asking for this:

$(function() {
  // target selects
  $selects = $("select");

  // listener to change value
  $selects.on("change", function() {
    let $sibling = $(this).siblings("select");

    // setting all attrs disabled of sibling to false
    $sibling.find("option").prop("disabled", false);

    // setting attr disabled according the current value to true
    $sibling.find(`option[value="${$(this).val()}"]`).prop("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <select class="form-control col-md-12" name="student1" required>
        <option value="" disabled selected>Select Student</option>
        <option value="0">John</option>
        <option value="1">Paul</option>
    </select>

    <select class="form-control col-md-12" name="student2" required>
        <option value="" disabled selected>Select Student</option>
        <option value="0">John</option>
        <option value="1">Paul</option>
    </select>
</div>

Upvotes: 2

Related Questions