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.

我的法典行之有效,但我认为可以改进。我现在有两个单独的进程。一项检查是,在页数和电离适当领域时选定哪一个无线电台。另一部分是用户在网页装满后作出的改动。我认为这可以简化,但我不知道如何。

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

这是根据您的评论/答复进行的:

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

});

j Query >=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

您可在交换手里测试被检查的状态,并简单地援引交换手(我认为你应当使用而不是立克)一页的负荷:

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

友情链接