-1

I had four select option fields. By evaluating the three select option's value some of the option fields of the fourth select option field need to be disabled for the user.

the first select option looks like 

<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>

the second select option looks like -

<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>

the third select option looks like

<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>

By comparing the values from above three select fields some of the option fields from the following selection need to be disabled. Rules for this is :

rule 1) if the bed type is single then no more than one adult can use one room but total number of adult and child can be two and so on.

rule 2) if the bed type is double then no more than two adult can use one room but total number of adult and child can be three and so on.

I need a help here to disable the option field from this last selection whose value is below than the minimum value of number of room required.

<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

I tried by the following way but this is not right and this is going no where.

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value="1"]").attr('disabled');
                  $("#vrooms option[value="2"]").removeAttr('disabled');
                  $("#vrooms option[value="3"]").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value="1"]").attr('disabled');
                   $("#vrooms option[value="2"]").attr('disabled');
                   $("#vrooms option[value="3"]").removeAttr('disabled');
                }
            }
         }
    });
 });
  • 2
    And at which point are you struggling? – Thomas Junk Aug 28 '18 at 19:32
  • can you show us if you've tried it yourself using javascript? –  Aug 28 '18 at 19:33
  • Welcome to Stack Overflow. Please read [How to Ask a Question?](https://stackoverflow.com/help/how-to-ask) We expect that you will have done research ahead of time and that you've made an attempt at a solution. Then, questions are usually about a specific problem you are having with the attempt. Stack Overflow isn't a place to just present what you want. – Scott Marcus Aug 28 '18 at 19:37
  • @ThomasJunk I just edited the question to add what I tried to do. –  Aug 28 '18 at 19:43
  • `$("#vrooms option[value="1"]").attr('disabled');` doesn't do anything. It simply gets the value of the `disabled` attribute, but you aren't storing or using that value anywhere. – Scott Marcus Aug 28 '18 at 19:44
  • There are some errors in your script and here is the corrected/edited JSFiddle: https://jsfiddle.net/4nLg1oxe/2/. Now we can work on getting your logic in place. – Si8 Aug 28 '18 at 19:47
  • My suggestion would be to remove the options from the dropdown if it doesn't apply to your selection instead of disabling them. – Si8 Aug 28 '18 at 19:49
  • Does your selection starts with Type of Bed? so shouldn't everything else be hidden until a bed is selected and Type of Bed should be first? That doesn't make any sense. Can you provide all your use case scenarios? – Si8 Aug 28 '18 at 19:50
  • 1
    Get values of dropdowns with the :selected query selector option -> var adults = $( "#vadults option:selected" ).val(); – daddygames Aug 28 '18 at 19:55
  • Here is something you can start with: https://jsfiddle.net/4nLg1oxe/13/ – Si8 Aug 28 '18 at 19:58
  • @Si8 user can give the information in any order, i wish that the user can not give the required no of rooms lower than the minimum requirements. I am doing it for a final year project. Isn't there any way ? –  Aug 28 '18 at 20:00
  • Here is something I did based on your rules... https://jsfiddle.net/4nLg1oxe/16/ Let me know if it's somewhat is according to your request. – Si8 Aug 28 '18 at 20:01
  • really appreciated your help. thank you –  Aug 28 '18 at 20:03

4 Answers4

1

You're not setting the disabled attribute properly.

Your code just tries to get the value of the disabled property.

$("#vrooms option[value="1"]").attr('disabled');  // <-- Only "gets" the disabled attribute value

Also, your original code has some errors in your JQuery selectors, in that you've got double quotes nested within double quotes. 

$("#vrooms option[value="1"]")  // <-- Can't nest double quotes inside of double quotes

You need to use single quotes inside of the doubles.

Lastly, JQuery deprecated the shortcut event methods (i.e. .change()) some time ago. They now recommend using the .on() method for event binding.

Here's a simplified example of what you are trying to do:

$(function(){
   // Use the .on() method to do event binding
   $("select").on("change", function () {
      let response = prompt("Enter 1 or 2");
      if(response === "1"){
        // To set a value, you have to pass two arguments
        // 1. The attribute you want to set
        // 2. The value you want to set
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").removeAttr('disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       } else {
        $("#vrooms option[value='1']").attr('disabled', 'disabled');
        $("#vrooms option[value='2']").attr('disabled', 'disabled');
        $("#vrooms option[value='3']").removeAttr('disabled');
       }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 1
    @Si8 That wasn't what the question asked about. – Scott Marcus Aug 28 '18 at 20:11
  • @Si8 Hiding/Showing would be done entirely differently from what the OP is trying to do and we're really not in a position to know if that would be a good fit for the OPs needs. Perhaps the OP wants users to be able to see all choices all the time, but restrict which can be chosen? That's perfectly reasonable. Saying that hiding them is a good UX is not possible with the limited information we currently have about the use case. – Scott Marcus Aug 28 '18 at 20:17
1

I just want to thank everybody for sharing your knowledge. Finally I am able to do this task and I would like to share this with you guys.

    <select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</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>
    </select>

    <select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</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>
   </select>

    <select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
    </select>

    <select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</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>
    </select>



    $('.xyz').change(function () {
                    var adults = $("#vadults option:selected").val();
                    var childs = $("#vchilds option:selected").val();
                    var beds = $("#vbeds option:selected").val();
                    var rooms = $("#vrooms option:selected").val();
                    if (beds == 1) {
                        if (adults == 1) {
                            $("#vrooms option[value='1']").removeAttr('disabled');
                            $("#vrooms option[value='2']").removeAttr('disabled');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 2) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('selected', 'selected');
                            $("#vrooms option[value='2']").removeAttr('disabled');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 3) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('selected', 'selected');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 4) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('selected', 'selected');
                            $("#vrooms option[value='4']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                                $("#vrooms option[value='4']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 5) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('disabled', 'disabled');
                            $("#vrooms option[value='5']").attr('selected', 'selected');
                            $("#vrooms option[value='5']").removeAttr('disabled');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('selected', 'selected');
                                $("#vrooms option[value='5']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('disabled', 'disabled');
                                $("#vrooms option[value='6']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 6) {
                            $("#vrooms option[value='1']").attr('disabled', 'disabled');
                            $("#vrooms option[value='2']").attr('disabled', 'disabled');
                            $("#vrooms option[value='3']").attr('disabled', 'disabled');
                            $("#vrooms option[value='4']").attr('disabled', 'disabled');
                            $("#vrooms option[value='5']").attr('disabled', 'disabled');
                            $("#vrooms option[value='6']").attr('selected', 'selected');
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('disabled', 'disabled');
                                $("#vrooms option[value='5']").attr('disabled', 'disabled');
                                $("#vrooms option[value='6']").attr('selected', 'selected');
                            }
                        }
                    }
                    if (beds == 2) {
                        if (adults == 1) {
                            $("#vrooms option[value='1']").removeAttr('disabled');
                            if (childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='1']").attr('selected', 'selected');
                            }
                            if (childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 2) {
                            if (childs == 0) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='1']").attr('selected', 'selected');
                            }
                            if (childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 3) {
                            if (childs == 0 || childs == 1 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 4) {
                            if (childs == 0) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 5) {
                            if (childs == 0 || childs == 1 || childs == 2 || childs == 3 || childs == 4) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                        if (adults == 6) {
                            if (childs == 0 || childs == 1 || childs == 2 || childs == 3) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5 || childs == 6) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('disabled', 'disabled');
                                $("#vrooms option[value='4']").attr('selected', 'selected');
                            }
                        }
                    }
                });


      select option[disabled] {
                display: none;
            }

If you guys want to check this on JSFiddle check this out JSFiddle for this task

  • Thats great... +1. Please do try to consolidate a lot of the repetitive code and make it modular so it's easier to maintain in the near future. – Si8 Aug 29 '18 at 13:37
  • 1
    I will do that in the coming days. It will not be possible without your help. Thank you very much. –  Aug 29 '18 at 16:15
0

Here is some code I did based on your request: 

$(document).ready(function(){
   $(".xyz").change(function () {
         var adults = $("#vadults").val();
         var childs = $("#vchilds").val();
         var beds = $("#vbeds").val();
         var rooms = $("#vrooms").val();
         
         if (beds == 1) { //if user picked single bed (Rule #1)
          //alert("1");
          $("#vadults option").each(function() { //for each option in adult dropdown
           if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 1) { //any adult greater than 1
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         else { //if user picked double bed (Rule #2)
          $("#vadults option").each(function() { //for each option in adult
            $(this).removeAttr('disabled'); //remove the disabled attr
          });
          $("#vadults option").each(function() { //for each option in adult dropdown
           if ($(this).index() > 0) { //if it's not the first default choice
              if ($(this).val() > 2) { //any adult greater than 2
                $(this).attr('disabled', 'disabled'); //disable (hide them)
              }
            }
          });
         }
         if(beds == 1){
            if(childs == 0){
               if(adults ==1){
                        }
               if(adults == 2){
                  $("#vrooms option[value='1']").attr('disabled');
                  $("#vrooms option[value='2']").removeAttr('disabled');
                  $("#vrooms option[value='3']").removeAttr('disabled');
               }
               if(adults == 3){
                  $("#vrooms option[value='1']").attr('disabled');
                   $("#vrooms option[value='2']").attr('disabled');
                   $("#vrooms option[value='3']").removeAttr('disabled');
                }
            }
         }
    });
 });
select option[disabled] {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
</select>
<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>
<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>
<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

Of course this just handles the bed change request. So you will have to incorporate other dropdown changes and keep track of it to update the other dropdowns as well.

I also used CSS snippet to hide the disabled options which you can see in the fiddle.

Not the most efficient way but this is to get you going in the right direction.

Si8
  • 9,141
  • 22
  • 109
  • 221
  • Please don't post working code to 3rd party sites as those links can die over time. Instead, just insert your code into a "code snippet" right here in your answer. – Scott Marcus Aug 28 '18 at 20:09
  • I was about to thank you for that... I was rushing the answer :) – Si8 Aug 28 '18 at 20:11
  • You really should add explanations of what the problem was with the OPs code and how your code solves the problem(s). As it is now, you just provided a working solution with no explanation as to how it does what it does. – Scott Marcus Aug 28 '18 at 20:19
  • @ScottMarcus It is done... I haven't answered a question in a while and totally overlooked. Thanks. – Si8 Aug 28 '18 at 20:24
-1

The code $("#vrooms option[value="1"]").attr('disabled'); only retrieve the value of disabled attribute of $('#vrooms option[value="1"]') element; try

$('#vrooms option[value="1"]').prop('disabled', true);

-------------------------- UPDATE --------------------------

Becouse of Scott comment I add the code:

$('#vrooms option[value="1"]').attr('disabled', 'disabled');

that work anyway.

-------------------------- UPDATE --------------------------

to disabling the option and

$('#vrooms option[value="1"]').prop('disabled', false);

to enabling the option. However, I don't think that yours is the right way to solve the problem. You could rather remove the options that can't longer be selected by the user.

-------------------------- UPDATE --------------------------

I think that the approach of Scott about .prop() is legit, so I have updated the code following that way.

Alessandro Foolish Ciak DAnton
  • 588
  • 7
  • 13
  • With your approach, you should be using the `.prop()` method instead of the `.attr()` method. – Scott Marcus Aug 28 '18 at 19:58
  • 1
    When using the `.attr()` method, you are working with the HTML attribute. `disabled` is a Boolean attribute - the mere presence of it disables the element, regardless of its value. To disable, use `element.attr("disabled", "disabled")` and to enable, you must remove the attribute `element.removeAttribute("disabled")` – Scott Marcus Aug 28 '18 at 19:58
  • @ScottMarcus from jQuery 1.6.1+ .attr() return a string with the value of the attribute selected that will change with selected element state. [link](http://api.jquery.com/prop/) for more informations. You can use ` $('#vrooms option[value="1"]').attr('disabled', true);` or ` $('#vrooms option[value="1"]').attr('disabled', 'disabled);` it work anyway. – Alessandro Foolish Ciak DAnton Aug 28 '18 at 20:20
  • `$('#vrooms option[value="1"]').attr('disabled', true);` works because `disabled` is a Boolean attribute, but `true` is not a valid value for the attribute. `$('#vrooms option[value="1"]').attr('disabled', false);` will not work for the same reason. – Scott Marcus Aug 28 '18 at 20:24
  • https://stackoverflow.com/questions/41176582/enable-disable-a-button-in-pure-javascript/41176769#41176769 – Scott Marcus Aug 28 '18 at 20:24
  • Also, the link you supplied is for the `.prop()` method (which is what I indicated you should be using with your approach). Here is [the link](http://api.jquery.com/attr/) for the `.attr()` method, which you are using – Scott Marcus Aug 28 '18 at 20:27
  • The $('#vrooms option[value="1"]').attr('disabled', false); don't assign the false value to disabled attribute, it simply remove the disabled attribute from the selected node..... – Alessandro Foolish Ciak DAnton Aug 28 '18 at 20:28
  • I use that aproach in my project and it work... However, I decided to update the answer because your approach seems more correct to me. – Alessandro Foolish Ciak DAnton Aug 28 '18 at 20:37
  • It's actually an error in calling `.attr()` (a Boolean for the second arg is not allowed) and the byproduct of that error is the removal of the attribute. Your talking about what the "end result" of doing something incorrectly is. Instead, just do it correctly. Read the docs. – Scott Marcus Aug 28 '18 at 20:38
  • I have just seen that the correct way to remove attribute using .attr() is to set the value as null. So Booleans values are not ok, thanks! ahahah – Alessandro Foolish Ciak DAnton Aug 28 '18 at 20:42
  • Right! Now, you've got it! But, Booleans are OK with `.prop()` and `.prop()` just works with the current state of the element and doesn't concern itself with the actual attribute HTML. For something like this, `.prop()` is often the better choice. – Scott Marcus Aug 28 '18 at 20:42