用html中的javascript打開/關閉開關
[英]on/off switch with javascript in html
問題描述
我有一個代碼，其中包含用於禁用/啟用表單輸入的開/關開關，但是它不起作用。 我的輸入始終關閉。 問題是什么？
<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
我對代碼邏輯進行了一些修改，但是可以完成工作。
源代碼
<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>
最后結果
說明
單擊單選按鈕之一時，它將為DisEn函數提供布爾值，並根據該值設置disabled參數。
解決方案2
0 2013-05-29 04:52:21
這是另一種方式，不涉及使用內聯onClick。 由於這個原因，我將腳本移到了body標簽的末尾，以便在我們開始用JavaScript弄亂這些元素之前，這些元素就可以在DOM中使用。 代碼注釋解釋了發生了什么。
香草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解決方案
<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>
在php中關閉和打開警告
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.