Yui 2.0 Включение ввода с помощью нескольких переключателей

Question

У меня есть приложение, которое использует Yui 2.0 и некоторые пользовательские JS.Я не писал его изначально, поэтому я не очень знаком с инструментами Yui JS.Для этой проблемы я рассмотрю три переключателя и один текстовый ввод.

В настоящий момент поведение заключается в том, что при выборе переключателя s3 вы разрешаете ввод текста в EnEable.

Что я хотел быВидно, что при выборе радиокнопки S2 или S3 toEnable активируется.Однако при использовании следующего примера происходит следующее: после того, как вы попытаетесь использовать метод NCRS_bind_to_radio на S2, S3 утрачивает способность влиять на вход toEnable все вместе.отключено обеими радиокнопками?

<ul>
  <li><label><input value="MET" type="radio" name="selector" id="s1"> 1</label></li>
  <li><label><input value="MET" type="radio" name="selector" id="s2"> 2</label></li>
  <li><label><input value="MET" type="radio" name="selector" id="s3"> 3</label></li>
<ul>

<input id="change" type="text" name="toEnable">

//S2 is the new addition here, bind for s3 has been around and works by itself, not with s2
NCRS_bind_to_radio('toEnable', 's2', true, true)
NCRS_bind_to_radio('toEnable', 's3', true, true)


function NCRS_bind_to_checkbox(input, checkbox, required, autofocus){ 
    // Bind an input to a checkbox. 
    // i.e., the input is disabled until the checkbox is checked
    // If "required", then "validate-required" is added/removed as needed. 
    // If "autofocus", then when the checkbox is checked, this field
    // automatically gets focus. 
    if (typeof checkbox == "string") {
        checkbox=document.getElementById(checkbox);
    }
    if (typeof input == "string") {
        input = document.getElementById(input);
    }

    YAHOO.util.Dom.removeClass(input, 'validate-required');
    if (required) { 
        YAHOO.util.Event.addListener(input, "blur", 
                NCRS_forms_passive_check_text, input, true)
    }

    input.disabled = !checkbox.checked;

    // Set initial state of "validate-required"
    if (checkbox.checked && required) { 
        YAHOO.util.Dom.addClass(input, 'validate-required');
    }

    // Add a "click" listener to the checkbox/radio
    YAHOO.util.Event.addListener(checkbox, "click", function() { 
        if (checkbox.checked) { 
            input.disabled = false;
            if (autofocus) { 
                input.focus();
            }
            if (required) { 
                YAHOO.util.Dom.addClass(input, 'validate-required');
            }
        } else { 
            NCRS_forms_set_error(input, true)
            YAHOO.util.Dom.removeClass(input, 'validate-required');
            input.disabled = true;
        }
    });

    // If parent is a "radio" input, also add listeners to sibling radios. 
    if (checkbox.type == 'radio') {
        var item;
        for (var i=0; i < checkbox.form[checkbox.name].length; i++) {
            item = checkbox.form[checkbox.name][i]
            if (item != checkbox) {
                // Add a "click" listener to the checkbox/radio
                YAHOO.util.Event.addListener(item, "click", function() { 
                    if (!checkbox.checked) { 
                        NCRS_forms_set_error(input, true)
                        YAHOO.util.Dom.removeClass(input, 'validate-required');
                        input.disabled = true;
                    }
                })
            }
        }
    }

    // Add a "click" listener to the dependent input.
    // This was intended to re-enabled a disabled input,
    // but doesn't work?
    YAHOO.util.Event.addListener(input, "click", function() {
        if (!checkbox.checked) { 
            checkbox.click();
            input.focus();                
        }
    });
}

NCRS_bind_to_radio = NCRS_bind_to_checkbox

Answer 1

Проблема в том, что когда выбрана одна радиокнопка, остальные отменяются. Я считаю, что когда вы выбираете S3, вход активируется на короткое время, а затем отмена выбора S2 отключает вход.

Я бы изменил метод для получения массива входных данных и изменил бы этот бит кода:

if (!checkbox.checked)
{ 
  NCRS_forms_set_error(input, true)
  YAHOO.util.Dom.removeClass(input, 'validate-required');
  input.disabled = true;
}

что-то вроде:

var state = true;
for (radio in radioArray)
{
  state = state && !radio.checked;
}

if (state)
{ 
  NCRS_forms_set_error(input, true)
  YAHOO.util.Dom.removeClass(input, 'validate-required');
  input.disabled = true;
}

Я немного поработал с YUI и позвольте мне предложить вам совет по упрощению вашего кода. Вместо этого:

if (typeof checkbox == "string")
{
  checkbox=document.getElementById(checkbox);
}
if (typeof input == "string")
{
  input = document.getElementById(input);
}

вы можете воспользоваться утилитами YUI DOM.

var Dom = YAHOO.util.Dom;

checkbox = Dom.get(checkbox);
input = Dom.get(input);

YUI проверит, является ли она строкой или нет, и всегда даст вам ссылку на элемент, даже если вы передадите элемент в get ().

Пол