如何使用 JavaScript 禁用单选按钮？

单选按钮是一种输入类型，用于通过从多个选项中选择一个值来获取用户的输入。您已经看到了用于在男性和女性之间选择性别的单选按钮。我们只选择其中一个选项，例如男性或女性，而忽略其他选项。

在某些情况下，我们可能需要根据某些条件禁用其他选项。您可以使用 HTML DOM 的 disabled 属性来启用和禁用单选按钮。在 JavaScript 中，将此属性设置为 true (disabled=true) 以禁用单选按钮。

禁用单选按钮

有时，我们需要为特定条件禁用单选按钮。这些是特殊情况，在这种情况下我们会禁用单选按钮。当单选按钮被禁用时，它们的颜色会变为 灰色。

在下面的示例中，我们将学习如何禁用单选按钮。

使用下拉列表禁用单选按钮

在这里，我们将使用一个包含 是 和 否 作为值的下拉列表来启用或禁用单选按钮。如果您选择否，所有单选按钮都将被禁用。另一方面，如果您选择是，所有单选按钮都将被启用。

请注意，您也可以使用复选框而不是下拉列表。

复制代码

输出 1

运行上述代码后，您将获得与下面给出的输出相同的结果。在这里，首先从下拉列表中选择是或否。

输出 2

通过从下拉列表中选择 否，所有单选按钮都将被禁用，并且您将无法选择任何编程语言。请参阅下面的屏幕截图。

输出 2

通过从下拉列表中选择 是，所有单选按钮将再次启用。因此，您将能够选择一种编程语言。请参阅下面的屏幕截图。

使用复选框禁用单选按钮

现在我们将使用复选框来禁用单选按钮。

复制代码

输出

运行上述代码后，您将获得与下面给出的输出相同的结果。在这里，复选框已默认选中，您只需通过单击单选按钮来选择一种编程语言。

如果您不是开发人员，请取消选中复选框。通过取消选中复选框，单选按钮将被禁用。

因此，这些是禁用单选按钮的不同方法。

一个简单的单选按钮示例

这是一个创建单选按钮的简单示例。在此示例中，我们将为性别和语言选择创建一个单选按钮组。输入将通过 HTML 表单获取，并通过 JavaScript 计算。请参阅下面的代码。

复制代码

输出

请参阅下面的单选按钮屏幕截图。在这里，从每组单选按钮中选择一个值。我们选择了 性别 = 女性 和 语言 = 印地语。

选择单选按钮值后，单击 显示选定值 按钮，您将看到选定的值已显示在网页上。