改进单选按钮的使用以启用/禁用表单字段 [英] Improving use of radio buttons to enable/disable form fields

问题描述

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

I have two radio buttons, and two corresponding form fields. Depending on which radio button is selected, one form field gets disabled and the other gets enabled.

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

My code works, but I think it can be improved. Right now I have two separate processes. One checks to see which radio button is selected when the page loads and disables the appropriate field. The other responds to changes by the user after the page has loaded. I believe it can be simplified but I don't know how.

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

谢谢！

推荐答案

这是未经测试的，基于您的评论/答案：

This is untested and based on your comments/answer:

jQuery< 1.6：

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

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

});

这篇关于改进单选按钮的使用以启用/禁用表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！