勾选复选框后，如何使用 JQuery 激活输入字段？答案

【问题标题】：How do I make a input field active after I tick a checkbox, using JQuery?勾选复选框后，如何使用 JQuery 激活输入字段？
【发布时间】：2012-10-15 13:03:53
【问题描述】：

我写了这段代码，但它似乎不起作用，见下文：

$('#Reserve, #BuyItNowPrice, #featureplate').attr('disabled','disabled');
$('.fake-fieldset .fake-input').css({'background-color':'#e1e1e1'});

$('.enable').click(function(){

    if($('.enable:checked')){
        $(this).closest('input').removeAttr('disabled');
    }
    else{
        $(this).closest('input').attr('disabled','disabled');
    }
});

这个 HTML 结构在我的代码中重复了 3 次，见下文

   <strong><input type="checkbox" class="enable" /> Specify Buy It Now Price</strong>
   <div class="fake-fieldset">
     <div class="fake-input">
       <span>&pound;&nbsp;</span>
         <input type="text" id="BuyItNowPrice" name="BuyItNowPrice" value="" />
     </div>
   </div>

我希望当我检查.enable 时，最接近的输入应该变为活动状态，以便用户可以键入一个值

任何帮助将不胜感激，谢谢

【问题讨论】：

标签： jquery html-input

【解决方案1】：

要改变的一件事：我认为你做不到

if($('.enable:checked'))

作为选择器总是返回一个 jQuery 对象（而不是 true 或 false）；而是尝试

if($('.enable).is(:checked'))

第二，由于closest在寻找祖先，你需要一个更好的方法来连接复选框和相关的input；也许将它们都放入包装器div中？然后你可以去父（包装器）并从那里进行查找。

【讨论】：

【解决方案2】：

Jquery 的 closest 查找您尝试更改的 input 不是的祖先元素。

您可能需要稍微更改您的 HTML 以使其工作。一个建议是创建一个父元素来包装这两个元素并向第二个输入添加一个类。像这样的：

<div class='enablearea'>
  <strong><input type="checkbox" class="enable" /> Specify Buy It Now Price</strong>
  <div class="fake-fieldset">
    <div class="fake-input">
      <span>&pound;&nbsp;</span>
      <input type="text" id="BuyItNowPrice" name="BuyItNowPrice" value="" class='enablechange' />
    </div>
  </div>
</div>

然后你可以像这样找到第二个输入：

$(this).parent('.enablearea').find('.enablechange')

【讨论】：