Yui 2.0 通过多个单选按钮启用输入

Yui 2.0 Enabling input via multiple radio buttons

本文关键字:单选按钮 启用 输入 Yui      更新时间:2023-09-26

我有一个使用 Yui 2.0 和一些自定义 JS 的应用程序。我最初不是写的,所以我对Yui JS工具不太熟悉。 对于这个问题,我将查看三个单选按钮和一个文本输入。

现在的行为是,当您选择单选按钮 s3 时,您可以启用文本输入以启用。

我希望看到的是,当您选择单选按钮S2或S3以启用时,已启用。但是,使用以下示例时,一旦您尝试在 S2 上使用 NCRS_bind_to_radio 方法,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

问题是,当选择一个单选按钮时,其他单选按钮将被取消选择。 我相信当您选择 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() 中也是如此。

保罗