Cannot detect a change in radio buttons

Question

I am trying to detect a change of a radio button values so I can disable or enable a text box.

Here is an jsFiddle about it.

When The answers are respectively Yes and No, nothing happened.

Here is the JS:

$(document).ready(function()
{

$("#input[id=clinic_staff]").change(function()
{
  var clinic_staff = $('input[id=clinic_staff]:checked').val();
  var y_staff = $('input[id=y_staff]:checked').val();
  var m_staff = $('input[id=m_staff]:checked').val();
  console.log(clinic_staff);
  console.log(m_staff);
  if(clinic_staff == "Yes" && m_staff == "No")
  {
    $("#patient_name_en").val("Confidential");
    $("#patient_name_en").prop("disabled", true);
  }
  else
  {
    $("#patient_name_en").val("");
    $("#patient_name_en").prop("disabled", false);
  }
})
});

And the html is here:

<div class="col-sm-3" style="border: 1px solid">
    <input type="radio" class="radio-inline" name="clinic_staff" id="clinic_staff" value="Yes">Yes
    <br>
    <input type="radio" class="radio" name="clinic_staff" id="clinic_staff"    value="No">No
</div>
<div class="col-sm-3" style="border: 1px solid">
    <input type="radio" class="radio-inline" name="m_staff" id="m_staff" value="Yes">Yes
    <br>
    <input type="radio" class="radio" name="m_staff" id="m_staff"    value="No">No
</div>
<input class="form-control" type="text"  name="patient_name_en" id="patient_name_en">

Even I can't see the results at the console with no errors.

I tried to use:

$("#input[id=clinic_staff]:radio").on('change', function(){ //... });

And then:

$("#input[id=clinic_staff]:checked").on('change', function(){ //... });

Answer 1

A couple of issues:

1. You cannot use the same id on more than one element in the document.

2. Your selector #input[id=clinic_staff] will never match anything, because it's looking for an element with id="input" (#input) and id="clinic_staff" ([id=clinic_staff]), which naturally cannot be simultaneously true. The tag selector is just the tag name (input), not #input.

Instead, remove the ids and look them up a different way, perhaps input[name=clinic_staff]:

$("input[name=clinic_staff]").on("change", ...)

Reduced example:

$("input[name=clinic_staff]").on("change", function() {
  console.log(this.value);
});

<div>
    <input type="radio" class="radio-inline" name="clinic_staff" value="Yes">Yes
    <br>
    <input type="radio" class="radio" name="clinic_staff" value="No">No
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

Side note: Strongly recommend use of the label element to make it possible to choose those radio buttons by clicking their text. My preferred way to do that is by putting the input inside the label:

$("input[name=clinic_staff]").on("change", function() {
  console.log(this.value);
});

<div>
    <label><input type="radio" class="radio-inline" name="clinic_staff" value="Yes">Yes</label>
    <br>
    <label><input type="radio" class="radio" name="clinic_staff" value="No">No</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

...but if they have to be separate (as is often the case), you'll have to give them unique ids and use for on the label, like this:

$("input[name=clinic_staff]").on("change", function() {
  console.log(this.value);
});

<div>
    <input type="radio" class="radio-inline" name="clinic_staff" id="clinic_staff1" value="Yes"><label for="clinic_staff1">Yes</label>
    <br>
    <input type="radio" class="radio" name="clinic_staff" id="clinic_staff2" value="No"><label for="clinic_staff2">No</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>