多个选择onclick禁用另一个表单字段 [英] Multiple select onclick disable another form field
问题描述
你好，
我有一个简单的表格...
< form>
< ; select name =" foo"多个>
<选项值=" 1">一个< /选项>
<选项值=" 2">二< /选项>
< option value =" 3"> three< / option>
< / select>
< ; input type =" text"名称= QUOT;嘘声"禁用>
< input type =" text"名称= QUOT;咕"禁用>
< / form>
当用户选择foo中的任何选项时multiselect，因为其中一个是值2，我需要启用字段boo。并且
goo。
任何人都有任何提示？可以这样做吗？谢谢！
Hello,
I have a simple form...
<form>
<select name="foo" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo" DISABLED>
<input type="text" name="goo" DISABLED>
</form>
When a user chooses any of the options in the "foo" multiselect, as
long as one of them is value 2, I need to enable the fields "boo" and
"goo".
Anyone have any tips? Can this be done? Thanks!
推荐答案
Forti2ude写道：
Forti2ude wrote:
你好，
我有一个简单的表格。 ..
[snip]
当用户选择foo中的任何选项时multlectlect，因为只要其中一个是值2，我需要启用字段boo和
goo。
任何人都有任何提示？可以这样做吗？谢谢！
Hello,
I have a simple form... [snip]
When a user chooses any of the options in the "foo" multiselect, as
long as one of them is value 2, I need to enable the fields "boo" and
"goo".
Anyone have any tips? Can this be done? Thanks!
是的。您需要考虑用户是否取消选择2，是否应该清除？b $ b和goo？我在这里使用onMouseUp方便，但是你应该仔细考虑用户想要的东西。
如果他们选择2，添加一些文字，然后选择另一个值，文本框
应该再次禁用。如果内容没有被清除，他们必须再次选择2，清除文本，然后选择他们的新选项。重置
按钮修复此问题，但要求他们实际重置表单，然后
选择新值。
你可以还可以使用按钮来读取值并启用/禁用
文本框。
< form>
< select name =" ; FOO" multiple onMouseUp ="
var a = this.form.getElementsByTagName（''option''）;
for（var i = 0; i< a.length; ++ i）{
if（a [i] .selected == true&& a [i] .value ==''2''）{
this.form [''boo'']。removeAttribute（''disabled''）;
this.form [''goo'']。removeAttribute（''disabled''）;
休息;
}否则{
//清除字段，你可能不想这样做
这个.form [''boo'']。value ='''';
this.form [''goo'']。value ='''';
//并再次禁用它们
this.form [''boo'']。setAttribute（''disabled''，''disabled''）;
this .form [''goo'']。setAttribute（''禁用''，''禁用''）;
}
}
">
< option value =" 1"> one< / option>
< option value =" 2"> two< /选项>
< option value =" 3"> three< / option>
< / select>
< input type =" text"名称= QUOT;嘘声"禁用>
< input type =" text"名称= QUOT;咕"已禁用>
< / form>
但是，我书中的* best *选项仅显示用户使用
的方框已选择2.如果2未被选中，请再次隐藏它们，但
不清除内容。如果用户在
中提交了带有一些文本的表单，则框2但未被选中（文本框将被隐藏，因此用户
可能没有意识到有什么东西在它们中），只需忽略文本即可在服务器上处理
。
用以下内容替换select标签：
< select name =" foo" multiple onMouseUp ="
var a = this.form.getElementsByTagName（''option''）;
for（var i = 0; i< a.length; ++ i）{
if（a [i] .selected == true&& a [i] .value ==''2''）{
//显示它们
this.form [''boo'']。style.visibility =''visible'';
this.form [''goo' '] .style.visibility =''visible'';
休息;
}否则{
//再次隐藏它们
this.form [''boo'']。style.visibility =''hidden'';
this.form [''goo'']。style.visibility =' '隐藏'';
}
}
">
请注意，您应该隐藏在第一个
的地方使用JS的文本框，否则如果JS被禁用并且你用样式隐藏它们（因为我已经完成了b
）你的用户永远不会看到文本框。
另外，你可以使用display =''none''和display =''''但这可能会弄乱
与你的页面布局。
Fred。
yup. You need to think whether if the user de-selects "2", should boo
and goo be cleared? I have used onMouseUp for convienience here, but
you should consider carefully what the user would like.
If they select 2, add some text, then select another value, the text box
should be disabled again. If the content isn''t cleared, they have to
select 2 again, clear the text, then select their new option. A reset
button fixes this but requires them to actually reset the form, then
select the new value.
You could also use a button to read the value and enable/disable the
text boxes.
<form>
<select name="foo" multiple onMouseUp="
var a = this.form.getElementsByTagName(''option'');
for (var i=0; i<a.length; ++i) {
if (a[i].selected == true && a[i].value == ''2'') {
this.form[''boo''].removeAttribute(''disabled'');
this.form[''goo''].removeAttribute(''disabled'');
break;
} else {
// clears the fields, you may not want to do this
this.form[''boo''].value = '''';
this.form[''goo''].value = '''';
// and disables them again
this.form[''boo''].setAttribute(''disabled'',''disabled'');
this.form[''goo''].setAttribute(''disabled'',''disabled'');
}
}
">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo" DISABLED>
<input type="text" name="goo" DISABLED>
</form>
However, the *best* option in my book is to only display the boxes if
the user has selected 2. If 2 becomes unselected, hid them again but
don''t clear the content. If the user submits the form with some text in
the boxes but 2 not selected (the text boxes will be hidden so the user
may not realise there''s something in them), deal with it at the server
by just ignoring the text.
Replace the select tag with the following:
<select name="foo" multiple onMouseUp="
var a = this.form.getElementsByTagName(''option'');
for (var i=0; i<a.length; ++i) {
if (a[i].selected == true && a[i].value == ''2'') {
// show them
this.form[''boo''].style.visibility=''visible'';
this.form[''goo''].style.visibility=''visible'';
break;
} else {
// hide them again
this.form[''boo''].style.visibility=''hidden'';
this.form[''goo''].style.visibility=''hidden'';
}
}
">
Note that you should probably hide the text boxes using JS in the first
place, else if JS is disabled and you hide them with styles (as I''ve
done) your users will never see the text boxes.
Also, you can use display = ''none'' and display = '''' but this may mess
with the layout of your page.
Fred.
Fred Oz写道：
[snip]
Fred Oz wrote:
[snip]
请注意，你应该在第一个地方使用JS隐藏文本框，否则如果JS被禁用并且你用样式隐藏它们（就像我一样） ''
完成）你的用户永远不会看到文本框。
Note that you should probably hide the text boxes using JS in the first
place, else if JS is disabled and you hide them with styles (as I''ve
done) your users will never see the text boxes.
哎呀！要使用样式隐藏它们，请使用以下boo& amp; goo输入：
< input type =" text"名称= QUOT;嘘声" style =" visibility：hidden;">
< input type =" text"名称= QUOT;咕" style =" visibility：hidden;">
但请注意上面关于使用JS隐藏它们的说明！
Fred。
Ooops! To hide them with a style, use the following boo & goo inputs:
<input type="text" name="boo" style="visibility: hidden;">
<input type="text" name="goo" style="visibility: hidden;">
But note the note above about using JS to hide them!
Fred.
Forti2ude写道：
Forti2ude wrote:
你好，
我有一个简单的表格...
< form>
< select name =" foo"多个>
<选项值=" 1">一个< / option>
< option value =" 2">两个< / option>
<选项值=" 3"> three< / option>
< / select>
< input type =" text"名称= QUOT;嘘声" DISABLED>
< input type =" text"名称= QUOT;咕" DISABLED>
< / form>
当用户选择foo中的任何选项时multlectlect，因为只要其中一个是值2，我需要启用字段boo和
goo。
任何人都有任何提示？可以这样做吗？谢谢！
Hello,
I have a simple form...
<form>
<select name="foo" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo" DISABLED>
<input type="text" name="goo" DISABLED>
</form>
When a user chooses any of the options in the "foo" multiselect, as
long as one of them is value 2, I need to enable the fields "boo" and
"goo".
Anyone have any tips? Can this be done? Thanks!
< form>
< select name =" foo" multiple onchange =" yourFunction（this.form）;">
< option value =" 1"> one< / option>
< option value =" 2"> two< / option>
< option value =" 3"> three< / option>
< / select> ;
< input type =" text"名称= QUOT;嘘声"禁用>
< input type =" text"名称= QUOT;咕"已禁用>
< / form>
< script type =" text / javascript">
function getSelectValues（sel）{
var a = [];
if（sel&& sel.options）{
var i = sel.options.length ;
while（i--> 0）{
if（sel.options [i] .selected）{
a.push （sel.options [i] .value）;
}
}
}
返回a; < br $>
}
函数yourFunction（f）{
var values = getSelectValues（f.elements [''foo'']）;
var oneOfTheValuesIsTwo = false;
var i = values.length;
while（i--> 0）{
if（values [i] == 2）{
oneOfTheValuesIsTwo = true;
break;
}
}
if（oneOfTheValuesIsTwo）{
f.elements [''boo''] .disable = false;
f.elements [''goo''] .disable = false;
} else {
f.elements [''boo'']。disabled = tr ue;
f.elements [''goo'']。disabled = true;
}
}
< / script>
适用于IE 6和Firefox 1.0PR。在Opera 7.54中不起作用，因为当按住CTRL并且选择多个项目
时，
onchange事件不会触发。
将事件更改为onclick使它在Firefox 1.0PR中工作，但是然后
它在IE 6或Opera 7.54中不起作用。
将事件更改为onfocus在列出的所有
浏览器中使其无法正常工作。
如果< select>中只有三个选项，则复选框将为
更好，可以更好地控制你想做的事情。
-
Grant Wagner< gw ***** @ agricoreunited.com>
comp.lang.javascript常见问题 - http：// jibbering .com / faq
<form>
<select name="foo" multiple onchange="yourFunction(this.form);">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="text" name="boo" DISABLED>
<input type="text" name="goo" DISABLED>
</form>
<script type="text/javascript">
function getSelectValues(sel) {
var a = [];
if (sel && sel.options) {
var i = sel.options.length;
while (i-- > 0) {
if (sel.options[i].selected) {
a.push(sel.options[i].value);
}
}
}
return a;
}
function yourFunction(f) {
var values = getSelectValues(f.elements[''foo'']);
var oneOfTheValuesIsTwo = false;
var i = values.length;
while (i-- > 0) {
if (values[i] == 2) {
oneOfTheValuesIsTwo = true;
break;
}
}
if (oneOfTheValuesIsTwo) {
f.elements[''boo''].disabled = false;
f.elements[''goo''].disabled = false;
} else {
f.elements[''boo''].disabled = true;
f.elements[''goo''].disabled = true;
}
}
</script>
Works in IE 6 and Firefox 1.0PR. Does not work in Opera 7.54 because the
onchange event does not fire when CTRL is held down and multiple items
are selected.
Changing the event to "onclick" makes it work in Firefox 1.0PR, but then
it does not work in IE 6 or Opera 7.54.
Changing the event to "onfocus" makes it work unreliably in all of the
browsers listed.
If there are only three options in the <select>, checkboxes would be
better and allow better control over what you want to do.
--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
这篇关于多个选择onclick禁用另一个表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
