好吧，我有几个像这样的单选按钮的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>
最简单的方法是使用 jquery。您可以将一个类添加到与"never"相关的所有输入中，将另一个类添加到与"daily"相关的所有输入中，如下所示：
<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" />
另一种选择是仅更新同一列中的无线电，但我发现它不太灵活......
是的，使用 jQuery 肯定更好。
这是一个完整的代码，需要做你想做的一切！
在文档头中引用 jquery 的最新代码，源代码为：
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
在头部本身的另一个脚本中添加 2 个函数
function disableAll() {
$('.radio').each(function(){
$(this).attr('disabled', 'disabled');
});
}
function enableAll() {
$('.radio').each(function(){
$(this).removeAttr('disabled');
});
}
然后在您的 html 代码中：
- 将一个名为 radio 的类添加到要禁用/启用的任何单选按钮。
- 创建一个点击函数以禁用 All（） 为从不单选按钮
创建一个点击函数以启用每日单选按钮的All（）
希望对您有所帮助！
首先，
请为每个单选按钮分配 id 属性。
现在使用永不单选按钮添加点击功能。
Never <input type="radio" name="graphics" id="never" value="never" onclick = "disableOther(this)"/>
现在添加一个脚本
如果要禁用选定的单选按钮，而不是全部
<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>
否则，如果要禁用选中的所有单选按钮，则从不单选按钮
<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>