Улучшение использования переключателей для включения / отключения полей формы - PullRequest
Новая
       9

Улучшение использования переключателей для включения / отключения полей формы

4 голосов
/ 18 мая 2011

У меня есть две радиокнопки и два соответствующих поля формы. В зависимости от того, какой переключатель выбран, одно поле формы отключается, а другое включается.

Мой код работает, но я думаю, что его можно улучшить. Прямо сейчас у меня есть два отдельных процесса. Проверяется, какой переключатель выбран при загрузке страницы, и отключается соответствующее поле. Другой реагирует на изменения пользователя после загрузки страницы. Я верю, что это можно упростить, но я не знаю как. 

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

Спасибо!

Ответы [ 3 ]

2 голосов
/ 18 мая 2011

Вы можете проверить проверенное состояние в обработчике 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
});
1 голос
/ 18 мая 2011

Это не проверено и основано на ваших комментариях / ответе:

jQuery <1.6: </p> 

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

});
0 голосов
/ 18 мая 2011

@ karim79, ваш ответ заставил меня начать, но он не работал, когда был выбран второй переключатель. Это работало только когда была выбрана 1-я кнопка.

Я придумал это, и, похоже, сработало. Я бы хотел, чтобы кто-нибудь предложил дополнительные улучшения. 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
});
...