用html中的javascript打开/关闭开关
[英]on/off switch with javascript in html
问题描述
I have a code which has an on/off switch for disable/enable form inputs, but it doesn't works. 
我有一个代码，其中包含用于禁用/启用表单输入的开/关开关，但是它不起作用。 My inputs are always off. 我的输入始终关闭。 What is the problem? 问题是什么？
<script>
function DisEn(X){
if(X.checked)Allow=false;
else Allow=true;
document.A.T1.disabled=Allow;
document.A.T2.disabled=Allow;
}
</script>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" >
<input type="radio" name="toggle" value="on">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>
<input type="text" name="T2" value="B" disabled>
</form>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2013-05-29 04:35:55
I modified your code logic a bit, but it does the work. 我对代码逻辑进行了一些修改，但是可以完成工作。
Source code 源代码
<script>
function DisEn(X){
document.A.T1.disabled=X;
document.A.T2.disabled=X;
}
</script>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" onClick="DisEn(false)">
<input type="radio" name="toggle" value="on" onClick="DisEn(true)">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>
<input type="text" name="T2" value="B" disabled>
</form>
</body>
</html>
Final result 最后结果
Explanation 说明
When you click to one of the radio buttons it gives a boolean value to the DisEn function and sets the disabled parameter according to it. 单击单选按钮之一时，它将为DisEn函数提供布尔值，并根据该值设置disabled参数。
解决方案2
0 2013-05-29 04:52:21
This is another way to do it, that doesn't involve using the inline onClick. 这是另一种方式，不涉及使用内联onClick。 For this reason, I moved the script to the end of the body tag, so that the elements are available in the DOM before we start messing with them in JavaScript. 由于这个原因，我将脚本移到了body标签的末尾，以便在我们开始用JavaScript弄乱这些元素之前，这些元素就可以在DOM中使用。 The code comments explains what is going on. 代码注释解释了发生了什么。
Vanilla JavaScript 香草JavaScript
<html>
<head>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" >
<input type="radio" name="toggle" value="on">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>
<input type="text" name="T2" value="B" disabled>
</form>
<script>
// First, get a collection of the radio inputs with the name 'toggle'
var toggles = document.getElementsByName('toggle');
// Loop through each radio input with the name 'toggle' and add an event listener
// to each toggle input so it knows what to do when a user clicks it.
for (var i = 0; i < toggles.length; i++) {
toggles[i].addEventListener('click', function(event) {
// Assign 'Allow' the value of the target. The target will be the radio
// input that the user clicks. The value is simply the value you have set
// above in your code - 'on' or 'off'.
var Allow = event.target.value;
// Check for the value of 'off' or 'on'
if (Allow === 'off') {
// Value is 'off', so disable the text inputs.
// document.GetElementsByName() returns an array of elements. Because of this,
// we have to use the [0] after we call it to get the first element in the array.
// Because each element must have a unique name, this will grab the correct text
// inputs to target.
document.getElementsByName('T1')[0].disabled = true;
document.getElementsByName('T2')[0].disabled = true;
} else {
// Value is 'on', so enable the text inputs.
document.getElementsByName('T1')[0].disabled = false;
document.getElementsByName('T2')[0].disabled = false;
}
}, false);
}
</script>
</body>
</html>
jQuery Solution jQuery解决方案
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input:radio[name=toggle]').click(function(event) {
if (event.target.value == 'on') {
$('input:text[name=T1], input:text[name=T2]').removeAttr("disabled");
} else {
$('input:text[name=T1], input:text[name=T2]').attr("disabled", "disabled");
}
});
});
</script>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" >
<input type="radio" name="toggle" value="on">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>
<input type="text" name="T2" value="B" disabled>
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.