Javascript 单击单选按钮禁用另一个单选按钮

我有两组单选按钮。

保险类型

和

报告类型

保险类型代码：

<input type="radio" class="p27" name="ins_type" value="loan"/> Loan Insurance
<input type="radio" class="p27" name="ins_type" value="benefit"/> Benefit Insurance 

贷款保险
福利保险

报告类型和代码：

<input type="radio" class="p27" name="rep_type" value="normal_rep"/> Normal Listing
<input type="radio" class="p27" name="rep_type" value="loan_coverage"/> Loan Coverage
<input type="radio" class="p27" name="rep_type" value="premium_coverage"/> Premium Coverage 

正常列表
贷款覆盖率
保险费范围

我想要实现的是，当我单击保险类型组中的福利保险单选按钮时，报告类型组中的贷款覆盖率和保费覆盖率单选按钮应该被禁用

---

我不是JavaScript爱好者，所以任何帮助对我都非常有用。

首先，为福利、贷款覆盖率和保费覆盖率（比如我的代码的福利、贷款和保费）的输入添加ID。然后使用以下javascript：

document.getElementById('benefit').onclick = function() {
    document.getElementById('loan').disabled = true;
    document.getElementById('premium').disabled = true;
}

如果您想在他们单击insurancetype中的back on loan时重新启用他们，则需要另一个处理程序来处理该输入：

document.getElementById('loanType').onclick = function() {
    document.getElementById('loan').disabled = false;
    document.getElementsById('premium').disabled = false;
}

---

首先，为福利、贷款覆盖和保费覆盖的输入添加ID（比如我的代码的福利、贷款和保费）。然后使用以下javascript：

document.getElementById('benefit').onclick = function() {
    document.getElementById('loan').disabled = true;
    document.getElementById('premium').disabled = true;
}

如果您想在他们单击insurancetype中的back on loan时重新启用他们，则需要另一个处理程序来处理该输入：

document.getElementById('loanType').onclick = function() {
    document.getElementById('loan').disabled = false;
    document.getElementsById('premium').disabled = false;
}

---

下面是实现这一点的纯粹Javascript方法。实际上，您需要处理两个事件—一个是检查

benefit

DOM元素，另一个是检查

load

DOM元素。由于单击“加载”可能会重新启用两个禁用的单选按钮，因此为处理每个按钮创建一个单独的功能：

document.getElementById('benefit') = function() {
    document.getElementById('loan_coverage').disabled = true;
    document.getElementById('premium_coverage').disabled = true;
};

document.getElementById('loan') = function() {
    document.getElementById('loan_coverage').disabled = false;
    document.getElementById('premium_coverage').disabled = false;
};

---

下面是实现这一点的纯Javascript方法。实际上，您需要处理两个事件—一个是检查

benefit

DOM元素，另一个是检查

load

DOM元素。由于单击“加载”可能会重新启用两个禁用的单选按钮，因此为处理每个按钮创建一个单独的功能：

document.getElementById('benefit') = function() {
    document.getElementById('loan_coverage').disabled = true;
    document.getElementById('premium_coverage').disabled = true;
};

document.getElementById('loan') = function() {
    document.getElementById('loan_coverage').disabled = false;
    document.getElementById('premium_coverage').disabled = false;
};

---

---

你应该在这些标签的末尾有斜线吗？@BraydonKains我想是的，它不会给出任何错误是的，它们的末尾应该有斜线。然而，如果没有，大多数浏览器不会抱怨。你应该在这些标记的末尾有斜杠吗？@BraydonKains我想是的，它不会给出任何错误是的，应该在它们的末尾有斜杠。但是，如果没有，大多数浏览器都不会抱怨。但是如果多次单击

benefit

DOM元素会发生什么？它只会将贷款和溢价设置为disabled，如果它们已经被禁用，这将不会起任何作用。对吧。。。但是如果之后单击了

loan

，会发生什么呢？我在我的编辑中提到了这一点，但是如果多次单击了

benefit

DOM元素，会发生什么呢？它只会再次将loan和premium设置为disabled，如果它们已经被禁用，这将不会起任何作用。对吧。。。但是如果之后单击了

loan

，会发生什么情况呢？我在我的编辑中指出，您不能通过再次单击单选按钮来取消选中它（至少在默认情况下不是这样，尽管您可以使用javascript启用这种行为）。我并不是建议您可以通过再次单击单选按钮来取消选中它。我的意思是，如果单击了另一个单选按钮，您应该能够单独/适当地处理该事件。对，但是，当您单击两次

福利

时，您的原始代码重新启用了该按钮，而不是当您单击

福利

然后单击

贷款

时。不过，您当前的代码很棒。您不能通过再次单击单选按钮来取消选中它（至少在默认情况下不是这样，尽管您可以使用javascript启用这种行为）。我并不是建议您可以通过再次单击单选按钮来取消选中它。我的意思是，如果单击了另一个单选按钮，您应该能够单独/适当地处理该事件。对，但是，当您单击两次

福利

时，您的原始代码重新启用了该按钮，而不是当您单击

福利

然后单击

贷款

时。不过，您当前的代码很棒。