Не удается обнаружить изменение в переключателях

Я пытаюсь обнаружить изменение значений переключателя, чтобы я мог отключить или включить текстовое поле.

Вот jsFiddle об этом.

Когда ответы соответственно Yes а также No, ничего не случилось.

Вот 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);
  }
})
});

И HTML здесь:

<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">

Даже я не вижу результатов на консоли без ошибок.

Я пытался использовать:

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

А потом:

$("#input[id=clinic_staff]:checked").on('change', function(){ //... });
Источник

3 ответа

Решение

Пара вопросов:

  1. Вы не можете использовать то же самое id на более чем один элемент в документе.

  2. Ваш селектор #input[id=clinic_staff] никогда не будет ничего соответствовать, потому что он ищет элемент с id="input" (#input) и id="clinic_staff" ([id=clinic_staff]), что, естественно, не может быть одновременно правдой. Селектор тега - это просто имя тега (input) не #input,

Вместо этого удалите id и искать их по-другому, возможно, input[name=clinic_staff]:

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

Сокращенный пример:

$("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>

Примечание: настоятельно рекомендуем использовать label элемент, чтобы сделать возможным выбор этих переключателей, нажав на их текст. Мой предпочтительный способ сделать это, поставив input внутри 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>

... но если они должны быть отдельными (как это часто бывает), вам придется дать им уникальные id и использовать for на этикетке вот так:

$("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>

Источник

Используйте это так

$('input[type=radio][name=clinic_staff]').change(function()  //use it with name

})
Источник

Попробуйте этот JavaScript.

$(document).ready(function()
  {

    $("input").on('change', function()
    {
      var clinic_staff = $('#clinic_staff:checked').val();
      var m_staff = $('#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").attr("disabled", true);
      }
      else
      {
        $("#patient_name_en").val("");
        $("#patient_name_en").attr("disabled", false);
      }
    })
 });

Бесплатное понижение означает, что требуется объяснение, понял.

Прежде всего, $("#input[id=clinic_staff]"), В jQuery, # означает, что он получает идентификатор некоторого поля. Там вы пытаетесь получить что-то и с id=input, и с id=clinic_staff. Что-то невозможное, как некоторые люди уже сказали. $('input[id=m_staff]:checked') гораздо лучше, но все должно быть сказано, JQuery существует, чтобы сделать вашу жизнь проще. Вы могли бы просто написать $('#m_staff:checked') там.

И еще: я сделал его более отзывчивым, заставляя его выполнять функцию каждый раз, когда вы нажимаете другую кнопку. Я сделал это потому, что если кто-то выберет "Да" в первом, а затем "Нет" во втором, он не будет показывать тег "Конфиденциально", потому что вы заставляете его реагировать только на события на первых переключателях.

В-третьих, но это не так важно: я изменил его обратно на $("input").on('change', function(), Это просто потому, что я использую это таким образом, так что не стесняйтесь делать, как вы хотите, ха-ха.

Я добавляю сюда фрагмент на случай, если вы захотите проверить его.

<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">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function()
  {

    $("input").on('change', function()
    {
      var clinic_staff = $('#clinic_staff:checked').val();
      var m_staff = $('#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").attr("disabled", true);
      }
      else
      {
        $("#patient_name_en").val("");
        $("#patient_name_en").attr("disabled", false);
      }
    })
 });

</script>

Источник
Другие вопросы по тегам