Yui 2.0 通过多个单选按钮启用输入
Yui 2.0 Enabling input via multiple radio buttons
我有一个使用 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() 中也是如此。
保罗
相关文章:
- 如何启用单选按钮
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- 如何根据是否通过jsp中的jstl选中单选按钮来启用和禁用下拉列表
- 内联JavaScript启用/禁用点击单选按钮上的选择和文本框
- 如何同时禁用和启用单选按钮
- 启用特定输入上的单选按钮
- 根据服务器时间禁用启用单选按钮
- 需要在选择单选按钮上启用提交按钮
- 禁用或启用单选按钮的Javascript
- 如何基于单选按钮切换启用/禁用输入字段
- 如何在选择单选按钮后启用提交按钮
- 启用单选按钮的文本框使用 javascript 列出列表项值之一
- 如果文本框 1、文本框 2、文本框 3 中存在值,如何启用单选按钮 1 和文本框 4
- 是否可以在更改单选按钮时禁用/启用jquery功能
- 通用JavaScript来处理单选按钮启用/禁用
- 基于单选按钮启用或禁用文本框
- 基于单选按钮启用/禁用功能按钮
- Yui 2.0 通过多个单选按钮启用输入
- 基于单选按钮启用/禁用提交按钮