CODEWITHSUNDEEP
jquery
Manh
Manh

Reputation: 123

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

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>

Upvotes: 1

Views: 264

Answers (1)

react_or_angluar
react_or_angluar

Reputation: 1574

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>

Upvotes: 2

Related Questions