无法检测到单选按钮的变化

Question

我正在尝试检测单选按钮值的变化，以便我可以禁用或启用文本框。

当答案分别是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(){ //... });

Answer 1

几个问题：

您不能在文档中的多个元素上使用相同的 id。
您的选择器 #input[id=clinic_staff] 永远不会匹配任何内容，因为它正在寻找具有 id="input" (#input) 和 [=71 的元素=] 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>

...但是如果它们必须分开（通常是这种情况），您必须给它们唯一的 ids 并在标签上使用 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>

Answer 2

像那样使用

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

})

Answer 3

试试这个 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。在那里，您正试图通过 id=input 和 id=clinic_staff 获得一些东西。一些不可能的事情，就像一些人已经说过的那样。 $('input[id=m_staff]:checked') 好多了，但不得不说，jQuery 的存在是为了让你的生活更轻松。你可以简单地写 $('#m_staff:checked') 那里。

另一件事：我让它更具响应性，让它在你每次点击另一个按钮时执行该功能。我这样做是因为如果有人在第一个中选择 "Yes" 然后在第二个中选择 "No"，它不会显示 "Confidential" 标签，因为你让它只响应事件在第一个单选按钮上。

第三，但这不太重要：我把它改回了 $("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>

无法检测到单选按钮的变化

Cannot detect a change in radio buttons

javascript

jquery

radio-button

jsfiddle