To disable all radio button options on page load if any radio button option is selected using jquery

Question

So I have a screen with multiple radio buttons. On initial page load, the page with radio button controls needs to be displayed regularly. But if selected and saved, on postback the radio button control needs to be disabled and not able to change. If the radio button control was not selected, then they should appear as normal.

This is my code.

<div id="divFood">
   @foreach (var fruit in Model)
   {
       <input id="@fruit.Value" type="radio" name="Fruit" value="@fruit.Value"/>
       <label for="@fruit.Value">@fruit.Text</label>
       <br/>
   }
   @foreach (var dairy in Model.Dairy)
   {
       <input id="@dairy.Value" type="radio" name="Dairy" value="@dairy.Value"/>
       <label for="@dairy.Value">@dairy.Text</label>
       <br/>
   }
   @foreach (var veg in Model.Vegetable)
   {
       <input id="@veg.Value" type="radio" name="Veg" value="@veg.Value"/>
       <label for="@veg.Value">@veg.Text</label>
       <br/>
   }
   @foreach (var meat in Model.Meat)
   {
       <input id="@meat.Value" type="radio" name="Meat" value="@meat.Value"/>
       <label for="@meat.Value">@meat.Text</label>
       <br/>
   }
</div>

My JQuery code is as follows. The issue is that my code only disables the selected radio button option rather than the radiobutton control. For example, if in Meat radio button, chicken option is selected, Only chicken gets disabled and not all other options of Meat. How do I fix it?

$(document).ready(function () {
    $("#divFood input[type=radio]").each(function() {
        if($(this).is(':checked')) {  
            $(this).attr('disabled', 'disabled'); 
        }                       
    });
});

Answer 1

You can loop through checked radio button and then inside each loop get the name attribute of checked radio to disabled other radio with same name.

Demo Code :

$(document).ready(function() {
  $("#divFood input[type=radio]:checked").each(function() {
    $("input[name=" + $(this).attr('name') + "]").prop("disabled", "true") //disabled
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divFood">
  <input type="radio" name="Fruit" value="A" />
  <label for="@fruit.Value">A</label>
  <br/>
  <input type="radio" name="Fruit" value="B" checked />
  <label for="@fruit.Value">B</label>
  <br/>
  <input type="radio" name="Fruit" value="C" />
  <label for="@fruit.Value">C</label>
  <br/>
  <input type="radio" name="Meat" value="AM" />
  <label for="@meat.Value">AM</label>
  <br/>

  <input type="radio" name="Meat" value="CM" />
  <label for="@meat.Value">CM</label>
  <br/>
  <input type="radio" name="Meat" value="PM" />
  <label for="@meat.Value">PM</label>
  <br/>

  <input type="radio" name="Veg" value="CMC" checked />
  <label for="@meat.Value">CMC</label>
  <br/>
  <input type="radio" name="Veg" value="PMC" />
  <label for="@meat.Value">PMC</label>
  <br/>
  <input type="radio" name="Veg" value="PMR" />
  <label for="@meat.Value">PMR</label>
  <br/>

</div>