如何同时禁用和启用单选按钮

How to disable and enable a radio button at the same time

本文关键字：启用 单选按钮 何同时      更新时间：2023-09-26

我有几个单选按钮，这些按钮是从mysql数据库中显示的。我试图实现的是，当我在选择单选按钮后单击提交按钮时，它被禁用，当我单击另一个单选按钮时，先前禁用的单选按钮将被启用，当前选择的单选按钮将被禁用。我用于显示按钮的代码：

    <form action="">
                        <?php
                        foreach ($sql->results() as $sql) {?>    
 <input type="radio" name="session_id" id="cur" value="<?php echo $sql->id; ?>">  <?php echo $sql->title;?><?php
}?>
<input type="submit" value="submit" onclick="set_type('a')">
                        </form>
                        <?php
                        }
                        ?>

我尝试在 jsfiddle 上启用和禁用一些单选按钮，但它仅适用于不同的 id，而我的单选按钮只有一个 id。

编辑：已经明确表示，ID必须是唯一的。我已经改变了这一点。

我对

你想做什么有点困惑，但我会为每种解释给出一个解决方案。 :)

您应该能够使用此代码来获得所需的效果，而无需使用任何id或name属性：

方法#1：如果您希望在选择其关联的单选按钮时禁用按钮，请使用以下代码：

$(":radio").on("change", function() {
    $(":submit:disabled").prop("disabled", false);
    $(this).next(":submit").prop("disabled", true);
});

方法#2：如果按钮应该仅在单击后禁用，则使用以下代码：

$(":radio").on("change", function() {
    $(":submit:disabled").prop("disabled", false);
});

。并让（大概）绑定到按钮的click功能处理禁用它。

说明：基本上，每当单击单选按钮时，您都希望打开任何当前禁用的按钮的 disabled 属性。 。最简单的方法是选择所有禁用的按钮并更改disabled属性。 完成此操作后，您可以将disabled状态重新应用于与单选按钮关联的状态（或者，执行此操作，当单击按钮时......无论哪一个与您尝试完成的相匹配:)）。

注意：这也是假设您在页面上没有任何其他单选按钮和提交按钮。 。如果这样做，则需要"限定"jQuery选择器的范围。 最简单的方法是提供 <form> 元素和id（我将在本例中使用"FORM_ID"），然后将代码更新为：

$("#FORM_ID").find(":radio").on("change", function() {
    $("#FORM_ID").find(":submit:disabled").prop("disabled", false);
    $(this).next(":submit").prop("disabled", true);
});

编辑：

根据您的澄清，此代码应完成您要查找的内容：

$(":submit").on("click", function() {
    $(":submit:disabled").prop("disabled", false);
    $(this).prop("disabled", true);
});

我有两个建议。

  1. HTML 中的多个元素不能使用相同的 ID。请更改它
  2. 您可以使用 CSS 来实现上述相同功能
相关文章：