JavaScript一键禁用两个输入
[英]JavaScript disable two inputs with one click
问题描述
I have this working currently, when you press the check box, the drop down (textbox_1) becomes disabled. 
我目前正在使用此功能，当您按下复选框时，下拉列表（textbox_1）会被禁用。 My question is, how to retrofit this code to also disable textbox_2 by the same click... 我的问题是，如何改装此代码以通过单击相同的按钮也禁用textbox_2 ...
<html>
<head>
<script type="text/javascript">
// setup a bit of code to run after the document has loaded. (note that its set on window)
window.addEventListener('load', function(){
potential_checkboxes = document.getElementsByTagName('input');
for(i = 0; i < potential_checkboxes.length; i ++) {
element = potential_checkboxes[i];
// see if we have a checkbox
if (element.getAttribute('type') == 'checkbox') {
// initial setup
textbox = document.getElementById(element.getAttribute('rel'));
textbox.disabled = element.checked;
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById(this.getAttribute('rel'));
// set disabled property of textbox to not checked property of this checkbox
textbox.disabled = this.checked;
}, false);
}
}
}, false);
</script>
</head>
<body>
<h1>Enable/disable input based on checkbox.</h1>
<form>
<label for="textbox_1">
<SELECT class="enteredYear" id="textbox_1" name=year>
<OPTION selected value="">Year</OPTION>
<OPTION value=2013>2014</OPTION>
<OPTION value=2013>2013</OPTION>
<OPTION value=2012>2012</OPTION>
</SELECT>
</label>
<label for="textbox_2">
Textbox 1:
<input id="textbox_2" type="text" value="some value" />
</label>
<br />
<input id=="checkbox_1" type="checkbox" rel="textbox_1"/>
<label for="checkbox_1">I have a classic car.</label>
<hr />
<form>
</body>
</html>
4 个解决方案
解决方案1
3 2013-07-30 20:44:00
Just "grab" the textbox_2 using document.getElementById('textbox_2') , and disable it inside your change event listener for the checkbox. 只需使用document.getElementById('textbox_2') “抓取” textbox_2 ，然后在您的更改事件侦听器中将其禁用即可。
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById('textbox_1');
// ---------------------------------------------
// Grabs the textbox_2 element
textbox2 = document.getElementById('textbox_2');
// ---------------------------------------------
// set disabled property of textbox to not checked property of this checkbox
textbox.disabled = this.checked;
// ------------------
// Disables textbox_2
// ------------------
textbox2.disabled = this.checked;
}, false);
解决方案2
1 2013-07-30 20:43:44
Add a CSS class name to the elements you want to disable and use: 将CSS类名称添加到要禁用和使用的元素：
var checks = document.getElementsByClassName('disableme')
"checks" will then by an array containing those elements. 然后，将通过包含这些元素的数组进行“检查”。 Loop, disable. 循环，禁用。
解决方案3
0 2013-07-30 20:43:28
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById(this.getAttribute('rel'));
textbox.disabled = this.checked;
textbox2 = document.getElementById('textbox_2');
textbox2.disabled = this.checked;
}, false);
解决方案4
0 2013-07-30 20:50:22
If you want to stick with a similar approach, you could do something like this: 如果您要坚持类似的方法，则可以执行以下操作：
<input id=="checkbox_1" type="checkbox" rel="textbox_1,textbox_2"/>
element.addEventListener('change', function() {
var ids = this.getAttribute('rel').split(",");
for(var i = 0; i < ids.length; i++) {
textbox = document.getElementById(ids[i]);
// set disabled property of textbox to not checked property of this checkbox
textbox.disabled = this.checked;
}
}, false);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.