Improving use of radio buttons to enable/disable f

Question

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

Thanks!

Answer 1

@karim79, your answer got me started but it didn't work when the 2nd radio button was selected. It only worked when the 1st radio button was selected.

I came up with this, and it seems to do the trick. I'd welcome anyone to offer additional improvements though. JavaScript blows my mind.

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

Answer 2

You can test the checked state within the onchange handler, and simply invoke the onchange handler (which I believe you should be using instead of onclick) once when the page loads:

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

This is untested and based on your comments/answer:

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

});