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

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

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

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

谢谢！

Answer 1

这是未经测试的，并根据您的意见/答案：

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

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

Answer 2

您可以在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 }); 

Answer 3

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