【问题标题】:enable input fields if radio buttons is checked with jquery如果使用 jquery 检查单选按钮,则启用输入字段
【发布时间】:2023-03-21 16:37:02
【问题描述】:

我在 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">

我希望如果用户单击单选按钮中的选项 Yes,将 html 属性disabled="disabled" 删除到最后一个输入字段,如果用户单击选项 No 在单选按钮中将属性disabled="disabled" 添加到最后一个输入字段

我怎样才能用 jquery 做到这一点?

谢谢!

【问题讨论】:

    标签: jquery radio-button


    【解决方案1】:

    你可以使用removeAttr

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

    查看JsFiddle中的演示

    【讨论】:

      【解决方案2】:
      $('input[name="item[shipping]"]').on('click', function() {
         if ($(this).val() === 'true') {
            $('#item_shipping_cost').removeProp("disabled");
         }
         else {
            $('#item_shipping_cost').prop("disabled", "disabled");
         }
      });
      

      【讨论】:

        【解决方案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

        【讨论】:

          【解决方案4】:

          这是一个

          DEMO

          。我想这会对你有所帮助

          【讨论】:

          • 点击no时输入不失效
          猜你喜欢
          • 2017-06-27
          • 2011-04-17
          • 2012-03-29
          • 2019-12-13
          • 2018-02-15
          • 2012-01-05
          • 1970-01-01
          • 2017-09-02
          • 2017-01-18
          相关资源
          最近更新 更多