使用JQuery勾选复选框后,如何使输入字段处于活动状态?

时间:2011-05-17 14:59:54

标签: jquery html-input

我有我写的这段代码,但它似乎没有用,见下文:

$('#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时,最近的输入应该变为活动状态,以便用户可以键入值

非常感谢任何帮助,谢谢

2 个答案:

答案 0 :(得分:1)

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')

答案 1 :(得分:1)

要改变一件事:我认为你不能做到

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

作为选择器总是返回一个jQuery对象(而不是true或false);而是尝试

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

其次,由于closest正在寻找祖先,因此您需要一种更好的方法来将复选框与相关的input相关联;也许把它们都放到包装div中?然后你可以去父母(包装)并从那里做一个发现。