javascript - 根据单选按钮和选择选项的选择启用和禁用表单字段

Question

在上面的表单中，当用户选择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 代码组合在一起？

Answer 1

只需替换这个...

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

<强> Here is a fiddle demo