表单单选按钮禁用/启用组
Form radio buttons disable/enable groups
我有一个正在为客户构建的表单,我正在尝试使它成为这样,当选择一组单选按钮时,禁用复选框列表,但如果复选框的单选按钮被选中,则清除其他单选按钮(如果它们被选中)。
这是我正在使用的代码:
<form action="#">
<fieldset><legend>Activities</legend>
<input style="margin-right:0; margin-left:0;" type="radio" id="Golf" value="I would like to golf at The Breakers Ocean Course" name="activity" />
<label for="Golf">Golf - The Breakers Ocean Course</label>
<ul style="margin-top:0;">
<label for="club">Club Rental</label>
<input style="margin-right:0; margin-left:0;" type="radio" id="club-yes" value="Yes" name="clubrental" />
<label for="club-yes">Yes</label>
or
<input style="margin-right:0; margin-left:0;" type="radio" id="club-no" value="No" name="clubrental" />
<label for="club-no">No</label><br>
<input style="margin-right:0; margin-left:0;" type="radio" id="right-hand" value="Right Handed" name="clubhand" />
<label for="right-hand">Right Handed</label>
or
<input style="margin-right:0; margin-left:0;" type="radio" id="left-hand" value="Left Handed" name="clubhand" />
<label for="left-hand">Left Handed</label>
</ul>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="hometour" value="I would like to take the Home tour and Worth Avenue Shopping" name="activity" />
<label for="hometour">Home tour and Worth Avenue Shopping</label>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="museum" value="I would like to attend the Cars of Dreams Museum Tour" name="activity" />
<label for="museum">Cars of Dreams Museum Tour</label>
<div style="clear:both;"> </div>
<input style="margin-right:0; margin-left:0;" type="radio" id="spa" value="I would like to attend The Spa at the Breakers" name="activity" />
<label for="spa">Spa - The Spa at the Breakers</label>
<ul style="margin-top:5px;">
- Please select two treatments<br>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="personal-retreat-massage" value="Personal Retreat Massage" name="treatment" onclick="setItems(this)">
<label for="personal-retreat-massage">Personal Retreat Massage</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="simplicity-massage" value="Simplicity Massage" name="treatment" onclick="setItems(this)">
<label for="simplicity-massage">Simplicity Massage</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="guerlain-classic-facial" value="Guerlain Classic Facial" name="treatment" onclick="setItems(this)">
<label for="guerlain-classic-facial">Guerlain Classic Facial</label>
</div>
<div style="float:left; width:220px; margin-right:15px;">
<input type="checkbox" id="cellular-enzyme-peel" value="Cellular Enzyme Peel" name="treatment" onclick="setItems(this)">
<label for="cellular-enzyme-peel">Cellular Enzyme Peel</label>
</div>
</ul>
</fieldset>
<center><input style="width:75px; height:25px; margin-bottom:25px;" type="submit" value="Submit" name="submit"></center>
</form
>我不能使用PHP,所以这只能是Javascript。
谢谢。
您可以尝试在未选中spa单选按钮时禁用复选框,并在选中时启用它们。您可以检查无线电元件的焦点状态。我认为像下面这样的东西应该适合你:
$('[type="radio"]').focus(function(){
if ($('#spa').prop('checked')) {// jQuery 1.7.2
$('[type="checkbox"]').removeAttr('disabled');
} else {
$('[type="checkbox"]').attr('disabled', 'disabled');
}
})
希望对您有所帮助!
你应该看看jQuery文档!他们非常有帮助!
http://api.jquery.com/
在您当前的情况下可能会有所帮助的一些事情是:
http://api.jquery.com/attr/
http://api.jquery.com/removeAttr/
http://api.jquery.com/focus/
http://api.jquery.com/blur/
http://api.jquery.com/category/selectors/
相关文章:
- 如何启用单选按钮
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- 如何根据是否通过jsp中的jstl选中单选按钮来启用和禁用下拉列表
- 内联JavaScript启用/禁用点击单选按钮上的选择和文本框
- 如何同时禁用和启用单选按钮
- 启用特定输入上的单选按钮
- 根据服务器时间禁用启用单选按钮
- 需要在选择单选按钮上启用提交按钮
- 禁用或启用单选按钮的Javascript
- 如何基于单选按钮切换启用/禁用输入字段
- 如何在选择单选按钮后启用提交按钮
- 启用单选按钮的文本框使用 javascript 列出列表项值之一
- 如果文本框 1、文本框 2、文本框 3 中存在值,如何启用单选按钮 1 和文本框 4
- 是否可以在更改单选按钮时禁用/启用jquery功能
- 自动启用单选按钮
- 启用单选按钮在加载时勾选
- 在文本字段值上启用单选按钮
- 禁用和启用单选按钮
- 启用单选按钮时,值在textfield >比x