在html中用javascript打开/关闭开关

时间：2013-05-29 04:17:35

标签： php javascript forms templates smarty

我有一个代码，它有一个用于禁用/启用表单输入的开/关开关，但它不起作用。我的输入总是关闭。有什么问题？

<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 个答案:

答案 0 :(得分：1)

我稍微修改了你的代码逻辑，但它完成了工作。

源代码

<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>

最终结果

Stuff in work

说明

当您单击其中一个单选按钮时，它会为DisEn函数提供一个布尔值，并根据它设置disabled参数。

答案 1 :(得分：0)

这是另一种方法，它不涉及使用内联onClick。出于这个原因，我将脚本移动到body标记的末尾，以便在我们开始在JavaScript中弄乱它们之前，DOM中的元素可用。代码注释解释了发生了什么。

Vanilla 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>
相关问题
最新问题