Question

I have this code I wrote but it doesnt seem to be working, see below:

$('#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');
    }
});

This HTML structure is repeated 3 times in my code, see below

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

What I’d like to happen is when I check .enable the closest input should become active so the user can type a value

Any help would be greatly appreciated, Thanks

Answer 1

One thing to change: I don’t think you can do

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

as a selector always returns a jQuery object (rather than true or false); instead try

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

Second, since closest is looking for an ancestor, you need a better way to connect the checkbox with the related input; maybe put them both into a wrapper div? Then you can go up to the parent (the wrapper) and do a find from there.