启用＆amp;根据单选按钮和选项的选择禁用表单的字段一起选择选项

Question

在上面的表单中，当用户选择No字段的Want it?单选按钮时，If yes, how?字段＆amp;应禁用Address字段的文本输入区域。

如果用户选择Yes，则应启用以下字段，其中用户应优先选择If yes, how?字段的选择菜单中的投放方式：

home_delivery

pos_delivery

如果用户选择pos_delivery，则应禁用Address字段的文本输入区域。

html＆amp; 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代码块彼此冲突。

在这种情况下，如何将这两个代码块组合在一起？

Answer 1

只需替换它......

$('#delivery_method,#address').removeProp("disabled", "disabled");

......有了......

$('#delivery_method,#address').prop("disabled", false);

另外，由于某种原因，你不知何故在那里留下了disabled函数或语句：

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执行相同操作，如上所示。

<强> Here is a fiddle demo