CODEWITHSUNDEEP
jqueryhtml
Rehan Azher
Rehan Azher

Reputation: 1340

Select With Disabled Options not being Submitted

I have 6 Select Input with similar values and labels . Requirement is to disable one label(value) once it is selected in any of the select. I can achieve that using below code:

  $('select').change(function()
  {
      var value = $(this).val();
      $('option').removeAttr("disabled");
      $('select').each(function ()
      {
         $("option[value=" + $(this).val() + "]").attr("disabled","disabled");
      });
   });

But when i submit the form none of the Select value is submitted.

Any hints on how to resolve this. My Submit action is using simple HTML Submit Button as show below:

<button class="btn btn-md btn-primary btn-md pull-right" type="submit">Submit</button>

My From is very big , so posting some part of it : 

<form id="headersForm"role="form" action="/lteUpdteRequestHeaders" method="POST" enctype=multipart/form-data>
          <select id="a"  name="a"><option>......</option></select>
          <select id="b" name="b"><option>......</option></select>
          <select id="c" name="c"><option>......</option></select>
          <select id="d" name="d"><option>......</option></select>
          <select id="e" name="e"><option>......</option></select>
          <select id="f" name="f"><option>......</option></select>
    <button class="btn btn-md btn-primary btn-md pull-right" type="submit">Submit</button>
</form>

select options are dynamically generated , removed that part of code for simplicity purpose.

This is not duplicate of existing question as indicated by some friends. Under that scenario user wanted to submit the Disabled Options values or Disable select values.

My question was regarding why I can not submit the value (which i deemed was enabled ) of selected enabled options of selects.

Below 2 solution which both work flawlessly ,here is another way to achieve this using filter, this is as from another answer on SO: 

$('select').on('change', function() {
  $('option').prop('disabled', false); //reset all the disabled options on every change event
  $('select').each(function() { //loop through all the select elements
    var val = this.value;
    $('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
       return this.value === val;
    }).prop('disabled', true); //disable those option elements
  });
}).change();

Thanks

Upvotes: 0

Views: 1526

Answers (2)

wiesion
wiesion

Reputation: 2435

For a reliable behavior, you need to have on top a "Pick an option" <option> with value="" and disabled - otherwise you will have trouble with your requirements given the initial state of the selected options of each <select>.

$('select').change(function() {
  /*
    Get all options from all selects,
    pick the selected ones for exclusion,
    use the selected items to generate an array of selected values
  */
  var allOptions = $('option[value!=""]'),
      selectedOptions = allOptions.filter(':selected'),
      selectedValues = selectedOptions
        .map(function() { return $(this).val() }).get();
  /*
    Loop over all not-selected items,
    if the value is within the selected values make it disabled,
    if the value is not present, enable the option
  */
  allOptions.not(selectedOptions).each(function() {
    if(selectedValues.indexOf($(this).val()) > -1) {
      $(this).attr('disabled', true);
    } else {
      $(this).removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="#">
  <select id="a" name="a">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="b" name="b">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="c" name="c">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="d" name="d">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="e" name="e">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <br>
  <select id="f" name="f">
    <option selected disabled value="">Pick an option</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
</form>

Upvotes: 1

Lord Grosse Jeanine
Lord Grosse Jeanine

Reputation: 1131

Based on what you said in the comments, here is some code (a little bit different from the original...) that does what you want (I hope).

$('select').change(function() {

    //enable every options
    $('option').prop('disabled', false);

    //loop though selects
    $('select').each(function() {

        var $loopSelect = $(this);

        //if select value is set
        if($loopSelect.val()) {

            //disabled option matching value in every other select
            $('select')
                .not($loopSelect)
                .find('option[value="'+$loopSelect.val()+'"]')
                .prop('disabled', true);

        }
    });

});

JSFiddle: https://jsfiddle.net/ybms79ve/

Upvotes: 0

Related Questions