Question 186715 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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'); 
        }                       
    });
});
Tags:

2

Answers


  1. 0

    I haven’t used jQuery in too long so unsure how to do it with JQ’s filter and each however with native dom api’s you can do something like the following.

    First we select all of the inputs, we filter the list by any that are checked. Next we take that filtered list and iterate it grabbing the name then we do a select of any elements which match that name and set the disabled property.

    This could be simplified a few ways, one way is you could wrap a fieldset around each group and just set that to disabled.

    Below is vanilla JS but should be adaptable to jQuery if necessary.

        const groups =  document.querySelectorAll("#divFood input[type=radio]");
  [...groups].filter(input => input.checked)
    .forEach(input => [...document.querySelectorAll(`input[name=${input.name}]`)]
        .forEach(el => el.disabled = true)
  );
    <div id="divFood">
  <input id="chicken" type="radio" name="Meat" value="chicken" />
  <label for="chicken">chicken</label>
  <br />
  <input id="fish" type="radio" name="Meat" value="fish" />
  <label for="fish">fish</label>
  <br />
  <input id="beef" type="radio" name="Meat" value="beef" checked/>
  <label for="beef">beef</label>
  <br />
  <br />
  <input id="beans" type="radio" name="vegitables" value="beans" />
  <label for="beans">beans</label>
  <br />
  <input id="lettuce" type="radio" name="vegitables" value="lettuce" />
  <label for="lettuce">lettuce</label>
  <br />
  <input id="tomatos" type="radio" name="vegitables" value="tomatos"/>
  <label for="tomatos">tomatos</label>
  <br />
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search