使用 Javascript 的 Html 单选按钮禁用进程或答案

【问题标题】：Html Radio button disable process with Javascript or使用 Javascript 的 Html 单选按钮禁用进程或
【发布时间】：2012-04-25 23:05:23
【问题描述】：

嗯，我有几个像这样的单选按钮的 html 表单......

    <tr class="AccountSettingtable">
            <td class="tableHeader">+ Graphics</td>
            <td class="tableHeader">Daily  <input type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" /></td>
            <td><input type="radio" name="logo"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" /></td>
            <td><input type="radio" name="fly" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" /></td>
            <td><input type="radio" name="print" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" /></td>
            <td><input type="radio" name="stationery" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" /></td>
            <td><input type="radio" name="packaging" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" /></td>
            <td><input type="radio" name="illustration" /></td>
            </tr>

在此表单中，表单顶部有两个单选按钮。
1) 每日
2) 从不。
那么，如果用户单击从不按钮（单选按钮），有什么方法可以禁用所有按钮（与从不相关），我该怎么做？

非常感谢。

完整代码..

<?php
include("include/session.php");
include("include/check.php");
include("database/db.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $_SESSION['uname'] .'s'.  " Profile"; ?></title>
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/UserAccount.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />


<script type="text/javascript">
$('input#never').bind('click', function() {
 $('input.never').attr('disabled', 'disabled');
 $('input.daily').attr('disabled', '');
});
$('input#daily').bind('click', function() {
 $('input.never').attr('disabled', '');
 $('input.daily').attr('disabled', 'disabled');
});

</script>

</head>
<body>
            <div class="AccountSettingmiddle">
            <table width="631">


            <td class="tableHeader">Daily  <input id="daily" type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input id="never" type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" value="yes" class="daily"  /></td>
            <td><input type="radio" name="logo" value="no"  class="never"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" value="yes" class="daily"  /></td>
            <td><input type="radio" name="fly" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" value="yes" class="daily"  /></td>
            <td><input type="radio" name="print" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" value="yes" class="daily"  /></td>
            <td><input type="radio" name="stationery" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" value="yes" class="daily"   /></td>
            <td><input type="radio" name="packaging" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" value="yes" class="daily"  /></td>
            <td><input type="radio" name="illustration" value="no" class="never" /></td>
            </tr>   

            </table>
            <script type="text/javascript">$(function() {    
$('input#never').bind('click', function() { $('input.never').attr('disabled', 
'disabled'); $('input.daily').attr('disabled', ''); }); $('input#daily').bind('click', 
function() { $('input.never').attr('disabled', ''); $('input.daily').attr('disabled', 
'disabled'); }); }); </script> 

            </div>

</body>
</html>

【问题讨论】：

哪些按钮与never相关？
@mplungjan，这是右侧按钮。
stackoverflow.com/questions/5892394/…
我可以看到您将单选按钮控件排列在网格中，以便用户知道哪个与哪个选项相关。但是，除非您为每个输入添加一些值，否则 服务器 不会知道 stationery=daily 和 stationery=never 之间的区别。像这样的东西应该工作：或可能取决于你如何'将在服务器上处理事情（如果你确实提交到服务器 - 你可能在 JS 中处理整个事情......
@Squig 感谢您的建议。

标签： php javascript html

【解决方案1】：

最简单的方法是使用 jquery。您可以向与“从不”相关的所有输入添加一个类，并为与“每日”相关的所有输入添加另一个类，如下所示：

<td><input type="radio" name="illustration" class="never" /></td>
<td><input type="radio" name="illustration" class="daily" /></td>

然后在您的 2 个单选按钮上添加一个点击处理程序：

    <script type="text/javascript">
    $('input#never').bind('click', function() {
     $('input.never').attr('disabled', 'disabled');
     $('input.daily').attr('disabled', '');
    });
    $('input#daily').bind('click', function() {
     $('input.never').attr('disabled', '');
     $('input.daily').attr('disabled', 'disabled');
    });

</script>

当然，你需要给你的收音机添加一个 id：

Daily  <input id="never" type="radio" name="graphics" value="daily" />
Never  <input id="daily" type="radio" name="graphics" value="never" />

另一种选择是仅更新同一列中的无线电，但我发现它不太灵活...

【讨论】：

您在 id="never" 后忘记了一个空格。您是否将 javascript 放在页面底部（或在准备好的处理程序中）？
纠正这个但没有效果。是的，我把这个javascript代码放在标签中。
哈，那么你必须把它放在一个准备好的处理程序中，像这样：$(function() { the code... });
你为什么不在你的例子@Gaet中这样做？
ready 处理程序使代码在页面完全呈现时执行。没有这个，代码会在输入创建之前被执行并且不会生效。

【解决方案2】：

是的，当然使用 jQuery 更好。

这里有一个完整的代码，可以满足你的所有需求！

在您的文档头中引用最新的jquery代码，来源为：

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

在 head 本身的另一个脚本中添加 2 个函数

function disableAll() {
    $('.radio').each(function(){
        $(this).attr('disabled', 'disabled');
    });
}
function enableAll() {
    $('.radio').each(function(){
        $(this).removeAttr('disabled');
    });
}

然后在你的html代码中：

向您要禁用/启用的任何单选按钮添加一个名为 radio 的类。
创建一个 onclick 函数来 disableAll() for Never 单选按钮
为 Daily 单选按钮创建一个 onclick 函数以 enableAll()

希望有帮助！

【讨论】：

【解决方案3】：

您要做的第一件事就是为每个单选按钮分配 id 属性。

现在使用从不单选按钮添加 onclick 功能..

Never  <input type="radio" name="graphics" id="never" value="never" onclick = "disableOther(this)"/>

现在添加一个javascript

如果你想禁用选定的单选按钮而不是全部

 <script type="text/javascript">
    function disableOther(ele){
       //if never radio button get  checked then 
       if(ele.checked == true){
          //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = true; 
        } else{
            //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = false; 
        }    
    }

 </script>

else 如果想禁用所有已选中的单选按钮，从不单选按钮

<script type="text/javascript">
   function disableOther(ele){
   var radios = document.getElementsByTagName('input');
     for (i = 0; i < radios.length; i++) {
       if (radios[i].type == 'radio' && radios[i].id != "never") {
          var radioid = radios[i].id;             
             if(ele.checked == true){
                  document.getElementById(radioid).disabled = true;
            }else{
                document.getElementById(radioid).disabled = false;
            }                 
         }
       }
   }
</script>

【讨论】：

所以他需要每个电台的脚本？效率不高
这里如果想禁用所有单选按钮然后修改js中的代码var radios = document.getElementsByTagName('input'); for (i = 0; i < radios.length; i++) { if (radios[i].type == 'radio' && radios[i].id != "never") { var radioid = radios[i].id; if(ele.checked == true){ document.getElementById(radioid).disabled = true; }else{ document.getElementById(radioid).disabled = false; } } }