将单选框按钮链接到输入

Question

我有 2 个单选按钮，每个按钮分别为 Yes 和 No 以及 1 个文本框。如果我选​​中 No 按钮，输入文本框将打开。如果选中是，文本框将被禁用。

此代码运行良好，但如果用户选中“是”，我想删除输入到文本框的内容

function ismcstopu() {
  var chkNo = document.getElementById("radio2_ismcstop");
  var mcnostopreason = document.getElementById("mcnostopreason");
  mcnostopreason.disabled = chkNo.checked ? false : true;
  if (!mcnostopreason.disabled) {
    mcnostopreason.focus();
  } else {
    mcnostopreason.val('');
  }
}

<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstopu()" value="Yes">Yes
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstopu()" value="No">No
<label for="mcnostopreason">If No, Reason:</label>
<input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled>

Answer 1

mcnostopreason 不是 jQuery 对象。因此你可以这样做：var mcnostopreason = $("#mcnostopreason");

或者您可以将mcnostopreason.val('') 更改为mcnostopreason.value = ''（这意味着您不需要更改任何其他内容）

Answer 2

.val 是一个 jQuery 构造，但您使用的是 DOM

这是一个使用 eventListener 的更好的版本

将document.getElementById("container") 更改为您拥有的任何容器（例如您的表单）

注意：测试真比测试假通常更好 我还在收音机中添加了标签，这样我们也可以点击是或否

document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.name === "ismcstop") {
    const mcnostopreason = document.getElementById("mcnostopreason");
    mcnostopreason.disabled = tgt.value === "Yes";
    if (mcnostopreason.disabled) {
      mcnostopreason.value = '';
    } else {
      mcnostopreason.focus();
    }
  }
})

<div id="container">
  <label><input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" value="Yes">Yes</label>
  <label><input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" value="No">No</label>
  <label for="mcnostopreason">If No, Reason:
    <input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled>
  </label>
</div>

jQuery 版本

$("[name=ismcstop]").on("click", function() {
  if (this.name === "ismcstop") {
    const $mcnostopreason = $("#mcnostopreason");
    $mcnostopreason.prop("disabled", this.value === "Yes");
    if ($mcnostopreason.is(":disabled")) {
      $mcnostopreason.val("");
    } else {
      $mcnostopreason.focus();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" value="Yes">Yes</label>
<label><input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" value="No">No</label>
<label for="mcnostopreason">If No, Reason:
  <input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled>
</label>