作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个表格,里面是这样的:
<fieldset class="billing-address">
<legend>Billing Address</legend>
<ol>
<li class="text combi"><label for="bill-address1">Address:</label> <input size="20" value="" name="basket_order:default:bill_address1" id="bill-address1"></li>
<li class="text"><label for="bill-address2">Address:</label> <input size="20" value="" name="basket_order:default:bill_address2" id="bill-address2"></li>
<li class="text"><label for="bill-address3">Town/City:</label> <input size="20" value="" name="basket_order:default:bill_address3" id="bill-address3"></li>
<li class="text"><label for="bill-address4">Region:</label> <input size="20" value="" name="basket_order:default:bill_address4" id="bill-address4"></li>
<li class="text"><label for="bill-post-code">Post code:</label> <input size="10" value="" name="basket_order:default:bill_postcode" id="bill-post-code"></li>
</ol>
</fieldset>
由于太复杂的原因无法进入这里,我无法直接获取 HTML,需要通过 javascript 来做一些事情。因此,我使用以下方法在上面添加了一个复选框和标签:
$('.billing-address ol').before('<input type="checkbox" id="billing-add-different" /><label for="billing-add-different">My billing address is the same as my delivery address</label>');
$('#billing-add-different').prop('checked',true).toggle(
function(){
$('.billing-address ol input, .billing-address ol select').css('background','#CCC').attr('disabled','disabled');
},
function(){
$('.billing-address ol input, .billing-address ol select').css('background','#FFF').removeAttr('disabled');
}
);
这会根据是否勾选来切换“禁用”属性和背景颜色。
然而,尽管该函数正在触发,但该复选框仍然在视觉上处于选中状态。
我在 http://jsfiddle.net/EFQuh/ 做了一个 jsfiddle 来说明. Firefox 8.0出现该错误,其他不清楚。
最佳答案
我不知道问题出在哪里(可能是 toggle
函数),但您可以将代码简化为:
$('#billing-add-different').prop('checked',true).change(function(){
$('.billing-address ol input, .billing-address ol select')
.css('background-color', this.checked ? '#CCC' : '#FFF')
.prop('disabled',this.checked);
}).change();
关于javascript - 复选框不会在视觉上取消选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8474751/
我是一名优秀的程序员,十分优秀!