在上面的表单中,当用户选择Want it?
字段的No
单选按钮时,以下选择菜单If yes, how?
应禁用地址
字段的字段和文本输入区域。
如果用户选择是
,则应启用以下两个字段,用户应优先在如果是,如何?
字段的选择菜单中选择交付方式它们是:
送货上门
pos_delivery
如果用户选择pos_delivery
,则应禁用Address
字段的文本输入区域。
html和jQuery代码如下:
<table>
<tr>
<td>Want it?</td>
<td><input type="radio" name="choose" id="yes" value="Yes" />Yes</td>
<td><input type="radio" name="choose" id="no" value="No" />No</td>
</tr>
<tr>
<td>If yes, how?</td>
<td>
<select name="delivery_method" id="delivery_method">
<option value="" selected="selected">Select Delivery Method</option>
<option value="home_delivery">Home Delivery</option>
<option value="pos_delivery">Point of Sale Delivery</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" type="text" value="" size="30" />
</td>
</tr>
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="choose"]').on('click', function() {
if ($(this).val() === 'Yes') {
$('#delivery_method,#address').removeProp("disabled");
}else{
$('#delivery_method,#address').prop("disabled", "disabled");
}
});disabled
});
</script>
</script>-->
<script type="text/javascript">
jQuery(document).ready(function($){
$('#address').attr('disabled','disabled');
$('select[name="delivery_method"]').on('change',function(){
var option = $(this).val();
if(option === "home_delivery"){
$('#address').removeAttr('disabled');
}else{
$('#address').attr('disabled','disabled');
}
});
});
</script>
下面的 jQuery 代码块单独达到目的,但是当它们组合在一起时,下面的两个 jQuery 代码块似乎相互冲突。
在这种情况下如何将这两 block 代码组合在一起?
最佳答案
只需替换这个...
$('#delivery_method,#address').removeProp("disabled", "disabled");
...有了这个...
$('#delivery_method,#address').prop("disabled", false);
此外,您出于某种原因留下了一个禁用
函数或语句:
jQuery(document).ready(function($){
$('input[name="choose"]').on('click', function() {
if ($(this).val() === 'Yes') {
$('#delivery_method,#address').prop("disabled", false);
}else{
$('#delivery_method,#address').prop("disabled", "disabled");
}
});disabled /* <-- this one */
});
...只需删除它,您就可以开始了。
编辑:一点解释:removeProp
仅采用一个属性,因此您要么正确使用它...
$('#delivery_method,#address').removeProp("disabled");
...或使用 prop
执行相同操作,如上所示。
关于javascript - 根据单选按钮和选择选项的选择启用和禁用表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23454668/