CODEWITHSUNDEEP
javascriptjqueryformsradio-button
Brett
Brett

Reputation: 2785

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

Thanks!

Upvotes: 4

Views: 1479

Answers (3)

Code Maverick
Code Maverick

Reputation: 20415

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

});

Upvotes: 1

Brett
Brett

Reputation: 2785

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

Upvotes: 0

karim79
karim79

Reputation: 342635

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

Upvotes: 2

Related Questions