javascript - 使用 JavaScript 禁用字段集

Question

function disableField() {
  "use strict";
  var a = document.forms["myForm"]["donate_type"].value;

  if (a == "pet") {
    document.getElementById("pet").disabled = false;
    document.getElementById("money").disabled = true;
    document.getElementById("service").disabled = true;
  }
  if (a == "money") {
    document.getElementById("pet").disabled = true;
    document.getElementById("money").disabled = false;
    document.getElementById("service").disabled = true;
  }
  if (a == "service") {
    document.getElementById("pet").disabled = true;
    document.getElementById("money").disabled = true;
    document.getElementById("service").disabled = false;
  }
}

我尝试通过在不同的选项上使用它来调用这个函数。我还尝试将整个 select 语句放在一个 div 中，并在 div 标记之后单击函数调用

<form name="myForm">
<select name="donate_type" onchange="disableField()">
<option value=""></option>
<option value="pet">Pet</option>
<option value="money">Monetary</option>
<option value="service">Service</option>
</select>

<fieldset id ="pet">
<legend>Pet</legend>
<form>
Please select the pet you would like to Donate<br>
<select name="pet" >
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
</select>

<fieldset id="monetary" >
<legend>Monetary</legend>
<form>
Requested Amount<input type="number" name="donate_amount">
Method of payment
<select name="donate_type" onclick = "">
<option value="credit_card">Credit Card</option>
<option value="cheque">Cheque</option>
</select>
</form>

但我似乎无法禁用选定的字段集。我有 3 个不同的字段集，标题分别为宠物、金钱和服务谁能告诉我我犯了什么错误？

提前致谢。

Answer 1

您遗漏了一些代码，这使得测试您的代码具有挑战性。我根据您的描述和引用添加了缺失的元素。

我用选择上的 onchange 监听器替换了选项上的 onclick 监听器。我还修复了您的 disable/disabled 拼写错误。

function disableField() {
  var a = document.forms["myForm"]["donate_type"].value;

  if (a === "pet") {
    document.getElementById("pet").disabled = false;
    document.getElementById("money").disabled = true;
    document.getElementById("service").disabled = true;
  } else if (a === "money") {
    document.getElementById("pet").disabled = true;
    document.getElementById("money").disabled = false;
    document.getElementById("service").disabled = true;
  } else if (a === "service") {
    document.getElementById("pet").disabled = true;
    document.getElementById("money").disabled = true;
    document.getElementById("service").disabled = false;
  } else {
    document.getElementById("pet").disabled = true;
    document.getElementById("money").disabled = true;
    document.getElementById("service").disabled = true;
  }
}
document.getElementById("pet").disabled = true;
document.getElementById("money").disabled = true;
document.getElementById("service").disabled = true;

<form name="myForm">
  <select name="donate_type" onchange="disableField()">
  <option value=""></option>
  <option value="pet">Pet</option>
  <option value="money">Monetary</option>
  <option value="service">Service</option>
</select>
</form>

<fieldset id="pet">
  <input type="text" placeholder="pet">
</fieldset>

<fieldset id="money">
  <input type="text" placeholder="money">
</fieldset>

<fieldset id="service">
  <input type="text" placeholder="service">
</fieldset>