复选框确实'nt在表现得像单选按钮之后,再次表现得很理想
Check Box does'nt behaves back again ideally after behaving like radio button
下面是有两个条件的代码:
- 选择运营商"AT&T"后,将只显示四个复选框,耳塞,皮套,汽车充电器和标签。此外这样,关联的复选框将表现为单选按钮,(这是工作良好)
- 选择运营商"Sprint"后,将显示所有复选框复选框的正常行为。(以下不适用代码),而输出是,一旦点击任何复选框标记check,重新单击它时不会取消选中
HTML
<p class="clearboth" id="carrierdropdown">
<label for="carriername">* Carrier Name</label>
<select name="carriername" id="carriername">
<option value="">Please Select</option>
<option value="att">AT&T</option>
<option value="sprint">Sprint</option>
</select>
</p>
<fieldset id="accessories_block">
<legend>Accessories</legend>
<p class="clearboth"> Were there any accessories affected
by the incident? </p>
<div class="leftcolumn">
<div id="accessories1">
<input class="battery_ele hide_att" type="checkbox" name="accbattery" value="accbattery" />
<em class="battery_ele hide_att">Battery</em>
<input type="checkbox" name="acchomecharger" value="acchomecharger" class="homecharger_ele hide_att" />
<em class="homecharger_ele hide_att" >Home Charger</em>
<input type="checkbox" name="accearpiece" value="accearpiece" />
<em>Ear Piece</em>
<input type="checkbox" name="accsim" value="accsim" class="simcard simcard_ele hide_att" />
<em class="simcard_ele hide_att">SIM Card</em>
<input type="checkbox" name="acclabel" value="acclabel" />
<em>Label Only</em> </div>
</div>
<div class="rightcolumn checkbox">
<input type="checkbox" name="accbeltclip" value="accbeltclip" class="hide_att" />
<em class="hide_att">Belt Clip</em>
<input type="checkbox" name="acccase" value="acccase" />
<em>Leather Case</em>
<input type="checkbox" name="accmemory" value="accmemory" class="hide_att"/>
<em class="hide_att">Memory Card</em>
<input type="checkbox" name="acccharger" value="acccharger" />
<em>Car Charger</em>
</div>
</fieldset>
Javascript
$('document').ready(function(){
var epaper = {
carrier : 'nocarrier',
carrier_name : $("#carriername"),
hideATT :$('.hide_att'),
OnCarrierChange: function(){
epaper.carrier_name.change(function() {
epaper.setAccessoryChosen();
});
},
getSelCarr : function (){ return (epaper.carrier_name.val() != '') ? epaper.carrier_name.val() : epaper.carrier; },
acc_blk_inp_chk : $('#accessories_block input[type=checkbox]'),
convertCheckboxToRadio : function(){
/*epaper.acc_blk_inp_chk.not($('#accessories_block input[type=checkbox]')).not(".simcard").removeAttr("checked"); */
$('#accessories_block input[type=checkbox]').not($(this)).not(".simcard").removeAttr("checked");
},
setRadioBehave : function (){
$('#accessories_block input[type=checkbox]').click(function(){
epaper.convertCheckboxToRadio();
$(this).attr('checked','checked');
});
},
unsetRadioBehave : function (){
$('#accessories_block input[type=checkbox]').click(function(){
$(this).attr('checked','checked');
});
},
setAccessoryChosen : function(){
var carrier = '';
var carrier = epaper.getSelCarr();
$('#accessories_block input[type=checkbox]').unbind('click');
epaper.acc_blk_inp_chk.attr("checked",false);
if(carrier == "att"){
epaper.hideATT.hide();
epaper.setRadioBehave();
} else {
epaper.unsetRadioBehave();
epaper.hideATT.show();
}
}
};
epaper.OnCarrierChange();
});
有人能帮我处理点2分辨率吗
在我看来,您的unsetRadioBehave
函数在单击时总是选中该框,而不是切换。
unsetRadioBehave : function (){
$('#accessories_block input[type=checkbox]').click(function(){
$(this).attr('checked','checked'); // <---- always checking the box
});
},
您可以解除对原始setRadioBehave
行为的绑定,使复选框恢复到其自然状态。
请在此处查看答案:https://stackoverflow.com/a/210345/61470有关删除事件处理程序的信息。
这对我有效:
setAccessoryChosen : function(){
var carrier = '';
var carrier = epaper.getSelCarr();
$('#accessories_block input[type=checkbox]').unbind('click');
epaper.acc_blk_inp_chk.attr("checked",false);
if(carrier == "att"){
epaper.hideATT.hide();
epaper.setRadioBehave();
} else {
$(this).unbind('click');
//epaper.unsetRadioBehave();
epaper.hideATT.show();
}
}
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 复选框/单选按钮-添加所选项目的总价
- 如何使用单选按钮设置cookie值
- Html按钮点击事件未触发单选按钮
- 复选框确实'nt在表现得像单选按钮之后,再次表现得很理想