Enable/Disable Radio button on dropdown selected?

Admin 1
Viewed 115

I'm trying to Enable/Disable Radio button on dropdown selected.

jsfiddle link

Ex: If persons is selected only name="persons" must be available to select(Anthony and Paul), Rest must be disabled

        <select class="browser-default" id="type" name="type">
        <option value="persons">persons</option>
        <option value="animals">animals</option>
        <option value="fruits">fruits</option>
        </select>

        <br/>

        <label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
        <br/>
        <label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
        <br/>

        <label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
        <br/>
        <label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
        <br/>


        <label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
        <br/>
        <label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>
        <br/>
html jquery javascript
4 Answers

There you go:

$(document).ready(function(){
  $('select').on('change',function(){
    $('input').attr('disabled',true)
    $('input[name="'+$(this).val()+'"]').removeAttr('disabled')
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>

But you should change your DOM structure.

user_10983030

Well to make this work, you just need to check the current value of select then make a condition on which input has to be disabled.

Pure JS approach

So all you have to do is to make an addEventListener for your select element change, then set the condition for disabling the associated inputs with the same name of the selected option. Then with the page onload event, we will just trigger the change event of select with the event constructor to make sure our event listener runs once in page load.

const select = document.getElementById("type");
const inputs = document.querySelectorAll("input[type='radio']");

window.onload = function() {
  select.dispatchEvent(new Event('change'));
}

select.addEventListener("change", function() {
  inputs.forEach(input => {
    input.checked = false;
    if (input.getAttribute("name") !== this.value) {
      input.setAttribute("disabled", true);
    } else {
      input.removeAttribute("disabled");
    }
  })
})
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br />

<label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label>
<br />
<label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label>
<br />

<label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label>
<br />
<label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label>
<br />


<label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label>
<br />
<label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label>
<br />

jQuery approach

This is almost the same as pure approach and it just implemented by jQuery. Here we will listen to the change event of our select element, then we will disable all the input and enable all the matched inputs value with select value. In the end, we will call the trigger event to make sure our selection will change once in the page load.

$(document).ready(function() {
  $("select").change(function() {
    $("input").prop("checked", false);
    $("input").prop('disabled', false);
    $("input[type='radio']").prop("disabled", true);
    $("input[name='" + $(this).val() + "']").prop("disabled", false);
  }).trigger("change");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony">Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul">Paul</label>

user_119085020 

const type = document.querySelector("#type");
const radios = document.querySelectorAll("#radio-group input[type=radio]");

function toggleDisabled() {
  radios.forEach(r => r.disabled = r.name !== type.value);
}

type.addEventListener("change", toggleDisabled);

toggleDisabled();
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<div id="radio-group">
  <label><input type="radio" name="fruits" value="apple" id="apple" >Apple</label>
  <br/>
  <label><input type="radio" name="fruits" value="banana" id="banana" >Banana</label>
  <br/>

  <label><input type="radio" name="animals" value="dog" id="dog" >Dog</label>
  <br/>
  <label><input type="radio" name="animals" value="cat" id="cat" >Cat</label>
  <br/>


  <label><input type="radio" name="persons" value="anthony" id="anthony" >Anthony</label>
  <br/>
  <label><input type="radio" name="persons" value="paul" id="paul" >Paul</label>
</div>

user_33700690

Working code below for disabled the radio button on change of values from select dropdow based on type of genre.

$(document).ready(function(){
  $('select').on('change',function(){
    $('input').prop('checked', false);
    $('input').prop('disabled', true);
    $('input[name="'+$(this).val()+'"]').prop('disabled', false);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default" id="type" name="type">
  <option value="persons">persons</option>
  <option value="animals">animals</option>
  <option value="fruits">fruits</option>
</select>

<br/>

<label><input type="radio" name="fruits" value="apple" id="apple" disabled="true">Apple</label>
<label><input type="radio" name="fruits" value="banana" id="banana" disabled="true">Banana</label>
<label><input type="radio" name="animals" value="dog" id="dog" disabled="true">Dog</label>
<label><input type="radio" name="animals" value="cat" id="cat" disabled="true">Cat</label>
<label><input type="radio" name="persons" value="anthony" id="anthony">Anthony</label>
<label><input type="radio" name="persons" value="paul" id="paul">Paul</label>

user_63908170
Related