改进了单选按钮的使用以启用/禁用表单字段

Improving use of radio buttons to enable/disable form fields

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

我有两个单选按钮，以及两个相应的表单字段。根据选择的单选按钮，一个表单字段被禁用，另一个表单字段被启用。

我的代码有效，但我认为可以改进。现在我有两个独立的过程。一个检查以查看在页面加载时选择了哪个单选按钮并禁用相应的字段。另一个在页面加载后响应用户的更改。我相信它可以简化，但我不知道如何简化。

$(document).ready(function() {
  if ($("#element_link_link_type_internal").is(':checked')) {
    $("#element_link_url").attr("disabled","disabled");
  } else {
    $("#element_link_page_id").attr("disabled","disabled");
  }
});
$(document).ready(function() {
  $("#element_link_link_type_internal").click(function(){
  $("#element_link_page_id").attr("disabled","");
  $("#element_link_url").attr("disabled","disabled");
  }),
  $("#element_link_link_type_external").click(function(){
  $("#element_link_page_id").attr("disabled","disabled");
  $("#element_link_url").attr("disabled","");
  });
});

谢谢！

您可以在 onchange 处理程序中测试选中的状态，并在页面加载时简单地调用 onchange 处理程序（我相信您应该使用它而不是 onclick）：

$(document).ready(function() {
    $("#element_link_link_type_internal").change(function() {
        $("#element_link_page_id").attr("disabled", !this.checked);
        $("#element_link_url").attr("disabled", this.checked);
    }).change(); // invoke once to set up initial state
});
这是

未经测试的，并且基于您的评论/答案：

jQuery <1.6：

$(document).ready(function() {
    var $type = $('input[name="element_link[link_type]"]'),
        $pageId = $("#element_link_page_id"),
        $url = $("#element_link_url");
    $type.change(function() {
        if ($type.filter(":checked").val() === "internal") {
            $pageId.removeAttr("disabled");
            $url.attr("disabled", "disabled");
        } else {
            $url.removeAttr("disabled");
            $pageId.attr("disabled", "disabled");            
        }
    }).change();
});

j查询>= 1.6

$(document).ready(function() {
    var $type = $('input[name="element_link[link_type]"]'),
        $pageId = $("#element_link_page_id"),
        $url = $("#element_link_url");
    $type.change(function() {
        var isDisabled = ($type.filter(":checked").val() === "internal");
        $pageId.prop("disabled", !isDisabled);
        $url.prop("disabled", isDisabled);
    }).change();
});

>@karim79，您的答案让我开始了，但是当选择第二个单选按钮时它不起作用。仅当选择第一个单选按钮时，它才有效。

我想出了这个，它似乎可以解决问题。不过，我欢迎任何人提供额外的改进。JavaScript 让我大吃一惊。

$(document).ready(function() {
$("input[name='element_link[link_type]']").change(function() {
    var v = $("input[name='element_link[link_type]']:checked").val()
    $("#element_link_page_id").attr("disabled", v == 'internal' ? "" : "disabled");
    $("#element_link_url").attr("disabled", v == 'internal' ? "disabled" : "" );
}).change(); // invoke once to set up initial state
});
相关文章：