get value of checked radio button with jquery

Question

I want to get the value of selected radio field on change. If the selected value is Admin I want to disable the group of fields with ID permissions_forms and all those checkboxes inside it should be checked. Otherwise,if the value is not Admin they should be enabled.

I tried to get the value but the function of change is not working in my case. Can somebody help me, please? Here is Jsfiddle

Here is HTML code:

<ul class="radio" id="role">
  <li>
    <input id="role-0" name="role" type="radio" value="User">
    <label for="role-0">User</label>
  </li>
  <li>
    <input checked="" id="role-1" name="role" type="radio" value="Admin">
    <label for="role-1">Admin</label>
  </li>
</ul>
<br/><br/><br/><br/>
<ul class="checkbox" id="permissions_forms">
  <li>
    <input checked="" id="diagnsosis_forms-0" name="diagnsosis_forms" type="checkbox">
    <label for="diagnsosis_forms-0"> Checkbox enable when admin selected</label>
  </li>
  <li>
    <input checked="" id="diagnsosis_forms-1" name="diagnsosis_forms" type="checkbox" >
    <label for="diagnsosis_forms-1"> Checkbox enable when admin selected</label>
  </li>
</ul>

And the jQuery code:

$('#role').change(function() {
  selected = $('input[name=role]:checked').val();
  if (selected == "Admin") {
    alert('Admin');
    $("#permissions_forms :input").attr("disabled", true);
    $("#permissions_forms").parent().siblings().find(':checkbox').attr('checked', this.checked);
  }
  else{
  $("#permissions_forms :input").attr("disabled", false);
  }
});

Answer 1

Class or Id?

Do not assign the same id to multiple elements. Id should be unique. Use class instead.

<div id="im-unique">Earth</div>

<div class="im-not-unique">Star 1</div>
<div class="im-not-unique">Star 2</div>

How to toggle the properties disabled and checked with jquery?

If the selected value is Admin I want to disable the group of fields with ID permissions_forms and all those checkboxes inside it should be checked.

$checkboxes.prop({ "disabled": true, 'checked': true}); will make the checkboxes disabled and checked.

Why prop not attr?

from jquery's doc:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

function onChange() {
  var selected = $('input[name=role]:checked').val();
  var $checkboxes = $("#diagnsosis_forms-0, #diagnsosis_forms-1", "#permissions_forms");
  if (selected == "Admin") {
    $checkboxes.prop({ "disabled": true, 'checked': true});
  }
  else {
    $checkboxes.prop("disabled", false);
  }
}
onChange()
$('#role').change(onChange);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="radio" id="role">
  <li>
    <input id="role-0" name="role" type="radio" value="User" class="">
    <label for="role-0">User</label>
  </li>
  <li>
    <input checked="" id="role-1" name="role" type="radio" value="Admin">
    <label for="role-1">Admin</label>
  </li>
</ul>
<br/><br/><br/><br/>
<ul class="checkbox" id="permissions_forms">
  <li>
    <input checked="" id="diagnsosis_forms-0" name="diagnsosis_forms" type="checkbox">
    <label for="diagnsosis_forms-0"> Checkbox enable when admin selected</label>
  </li>
  <li>
    <input checked="" id="diagnsosis_forms-1" name="diagnsosis_forms" type="checkbox" >
    <label for="diagnsosis_forms-1"> Checkbox enable when admin selected</label>
  </li>
</ul>