如果使用jquery检查单选按钮,则启用输入字段

时间:2012-05-08 11:51:29

标签: jquery radio-button

我在html代码中有这个单选按钮:

<span><input type="radio" value="false" name="item[shipping]" id="item_shipping_false" checked="checked"><label for="item_shipping_false" class="collection_radio_buttons">No</label></span>

<span><input type="radio" value="true" name="item[shipping]" id="item_shipping_true"><label for="item_shipping_true" class="collection_radio_buttons">Yes</label></span>

我有1个禁用字段,如:

<input id="item_shipping_cost" class="currency optional" type="text" size="30" name="item[shipping_cost]" disabled="disabled">

我希望如果用户点击单选按钮中的选项,请将html属性disabled="disabled"移到此最后一个输入字段,如果用户单击选项否< / strong>在单选按钮中将属性disabled="disabled"添加到最后一个输入字段

如何使用jquery进行此操作?

谢谢你!

4 个答案:

答案 0 :(得分:8)

您可以使用removeAttr

   $('#item_shipping_true').click(function()
{
  $('#item_shipping_cost').removeAttr("disabled");
});

$('#item_shipping_false').click(function()
{
  $('#item_shipping_cost').attr("disabled","disabled");
});

请参阅JsFiddle

中的演示

答案 1 :(得分:5)

$('input[name="item[shipping]"]').on('click', function() {
   if ($(this).val() === 'true') {
      $('#item_shipping_cost').removeProp("disabled");
   }
   else {
      $('#item_shipping_cost').prop("disabled", "disabled");
   }
});

答案 2 :(得分:3)

您想使用这样的JavaScript:

   $('#item_shipping_false').change(function() {
      $('#item_shipping_cost').prop('disabled', false);
    });
    $('#item_shipping_true').change(function() {
      $('#item_shipping_cost').prop('disabled', true);
    });

这是您案件的完整example

答案 3 :(得分:1)

这是

DEMO

。我想这会对你有帮助