disable SELECT options based on Radio selected do not work with jquery 3.4.1

Question

I got some jQuery code from another post that was asked about 11 years ago: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

but it only work with jquery 1.3.2

can anybody make it work with jquery 3.4.1

here is my code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
A: <input type="radio" name="abc123" value="1" id="a"/>
B: <input type="radio" name="abc123" value="2" id="b"/>
C: <input type="radio" name="abc123" value="3" id="c"/>

<select id="theOptions">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
  <option value="5">option 5</option>
  <option value="6">option 6</option>
</select>



<script>
$(function() {

$("input:radio[@name='abc123']").click(function() {
   if($(this).attr('id') == 'a') {

      
      $("#theOptions option[value='3']").attr("disabled","disabled");
      $("#theOptions option[value='4']").attr("disabled","disabled");
      $("#theOptions option[value='5']").attr("disabled","disabled");
      $("#theOptions option[value='6']").attr("disabled","disabled");
      $("#theOptions option[value='1']").attr("selected","selected");
      $("#theOptions option[value='1']").attr("disabled","");
      $("#theOptions option[value='2']").attr("disabled","");


   }


});

});

</script>

Why did you capitalize select? It makes your question look like a SQL question. — react_or_angluar, Dec 27 '20 at 08:16
Please give a look here: https://api.jquery.com/category/selectors/attribute-selectors/ (Simply remove the "@" symbol from your selectors in order to make them work again.) — deblocker, Dec 27 '20 at 11:24

score 2 · Accepted Answer · answered Dec 27 '20 at 11:35

Here is your code working with a newer jQuery version and without the @ symbol. I'm guessing that you will want to add code in an else statement to re-enable the select menu options when the B or C radio buttons are clicked.

$(function() {    
  $("input:radio[name='abc123']").click(function() {
    if ($(this).attr('id') == 'a') {
        $("#theOptions option[value='3']").attr("disabled", "disabled");
            $("#theOptions option[value='4']").attr("disabled", "disabled");
            $("#theOptions option[value='5']").attr("disabled", "disabled");
            $("#theOptions option[value='6']").attr("disabled", "disabled");
            $("#theOptions option[value='1']").attr("selected", "selected");
            $("#theOptions option[value='1']").attr("disabled", "");
            $("#theOptions option[value='2']").attr("disabled", "");
        }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A: <input type="radio" name="abc123" value="1" id="a"/>
B: <input type="radio" name="abc123" value="2" id="b"/>
C: <input type="radio" name="abc123" value="3" id="c"/>

<select id="theOptions">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
  <option value="5">option 5</option>
  <option value="6">option 6</option>
</select>

disable SELECT options based on Radio selected do not work with jquery 3.4.1

1 Answers1