javascript - get value of checked radio button with jquery -

i want value of selected radio field on change. if selected value admin want disable group of fields id permissions_forms , checkboxes inside should checked. otherwise,if value not admin should enabled.

i tried value function of change not working in case. can me, please? here jsfiddle

here 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 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);   } }); 

class or id?

do not assign same id multiple elements. id should 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 toggle properties disabled , checked jquery?

if selected value admin want disable group of fields id permissions_forms , checkboxes inside should checked.

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

why prop not attr?

from jquery's doc:

to retrieve , change dom properties such checked, selected, or disabled state of form elements, use .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>