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

Posted 2023-02-22

【中文标题】改进单选按钮的使用以启用/禁用表单字段

【英文标题】：Improving use of radio buttons to enable/disable form fields

【发布时间】：2011-08-27 13:20:46

【问题描述】：

我有两个单选按钮和两个对应的表单域。根据选择的单选按钮，一个表单域被禁用，另一个被启用。

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

$(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","");
  );
);

谢谢！

【参考方案1】：

这是未经测试的，基于您的 cmets/answer：

jQuery

$(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();

);

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() 

        var isDisabled = ($type.filter(":checked").val() === "internal");

        $pageId.prop("disabled", !isDisabled);
        $url.prop("disabled", isDisabled);

    ).change();

);

【讨论】：

@Scott，你好，你能帮我解决我的问题吗，非常感谢~***.com/questions/7629817/…

【参考方案2】：

@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
);

【参考方案3】：

您可以在 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 Brett 使用的是什么版本，因为 1.6+ 应该使用 prop() 而不是 attr()。

@Scott - 好点，我认为你的评论成功了！ :)