無法檢測到單選按鈕的更改

Question

我試圖檢測單選按鈕值的更改，以便可以禁用或啟用文本框。

這是關於它的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(){ //... });

Answer 1

幾個問題：

1. 您不能在文檔中的多個元素上使用相同的id 。

2. 您的選擇器#input[id=clinic_staff]將永遠不會匹配任何內容，因為它正在尋找具有id="input" （ #input ） 和 id="clinic_staff" （ [id=clinic_staff] ）的[id=clinic_staff] ，這自然不能同時為true 。 標簽選擇器只是標簽名稱（ 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> 

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

免費的downvote意味着需要說明，明白了。

首先， $("#input[id=clinic_staff]") 。 在jQuery中， #表示它正在獲取某個字段的ID。 在這里，您嘗試使用id = input和id = clinic_staff來獲得一些東西。 有些人已經說過，這是不可能的。 $('input[id=m_staff]:checked')更好，但是必須說，jQuery的存在使您的生活更輕松。 您可以$('#m_staff:checked')簡單地寫入$('#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>