This is my html:

<div class="form-item">
 <label>Disability: </label>
  <div class="form-radios student_course_disablity">
    <div class="form-item" id="edit-student-course-disability-not-stated-wrapper">
     <label class="option" for="edit-student-course-disability-not-stated">
      <input type="radio" id="edit-student-course-disability-not-stated" name="student[course][disability]" value="not_stated" checked="checked" class="form-radio student_course_disablity">  Not Stated</label>
    </div>
 <div class="form-item" id="edit-student-course-disability-yes-wrapper">
   <label class="option" for="edit-student-course-disability-yes">
     <input type="radio" id="edit-student-course-disability-yes" name="student[course][disability]" value="yes" class="form-radio student_course_disablity"> Yes</label>
 </div>
 <div class="form-item" id="edit-student-course-disability-no-wrapper">
   <label class="option" for="edit-student-course-disability-no">
     <input type="radio" id="edit-student-course-disability-no" name="student[course][disability]" value="no" class="form-radio student_course_disablity"> No</label>
 </div>
</div>

I want to run onchange event for this radio button:

I've tried this method:

$('input[type=radio][name=student[course][disability]]').change(function() {
  alert('hi');
});

But no luck

This is my html:

<div class="form-item">
 <label>Disability: </label>
  <div class="form-radios student_course_disablity">
    <div class="form-item" id="edit-student-course-disability-not-stated-wrapper">
     <label class="option" for="edit-student-course-disability-not-stated">
      <input type="radio" id="edit-student-course-disability-not-stated" name="student[course][disability]" value="not_stated" checked="checked" class="form-radio student_course_disablity">  Not Stated</label>
    </div>
 <div class="form-item" id="edit-student-course-disability-yes-wrapper">
   <label class="option" for="edit-student-course-disability-yes">
     <input type="radio" id="edit-student-course-disability-yes" name="student[course][disability]" value="yes" class="form-radio student_course_disablity"> Yes</label>
 </div>
 <div class="form-item" id="edit-student-course-disability-no-wrapper">
   <label class="option" for="edit-student-course-disability-no">
     <input type="radio" id="edit-student-course-disability-no" name="student[course][disability]" value="no" class="form-radio student_course_disablity"> No</label>
 </div>
</div>

I want to run onchange event for this radio button:

I've tried this method:

$('input[type=radio][name=student[course][disability]]').change(function() {
  alert('hi');
});

But no luck

• javascript
• jquery
• html
• radio-button

• You should use class or id for change event – Parth Trivedi Commented Jan 13, 2016 at 10:52
• [name="student[course][disability]"] would work (ie. quote the attribute value), otherwise you'd need to escape the square brackets, [name=student\\[course\\]\\[disability\\]] – billyonecan Commented Jan 13, 2016 at 10:54

2 Answers 2

Put name in double quote like below. Hope this will help.

$('input[type=radio][name="student[course][disability]"]').change(function () {   
    alert('hi');
});

It is better you group by the class rather than using name selector, that too without " quotes. You might want to use: 'input[name="student[course][disability]"]'.

$('input.student-course-disability').on("change click", function() {
  alert('hi');
});

Add click event too, just in case. Don't forget to give the class to the <input /> elements.

I have already given you the best solution, but for your updated solution:

$('input[name="student[course][disability]"]').change(function () {   
    alert('hi');
});