I'm trying to build a general function that get's called from four different checkboxes. When the checkbox is checked it should remove the attribute disabled from a button near the checkbox.

my buttons all have diffrent classes like this

button 1: class="button primary pie list-buy-button list_buy_button_1903"

button 2: class="button primary pie list-buy-button list_buy_button_1901"

button 3: class="button primary pie list-buy-button list_buy_button_1899"

button 4: class="button primary pie list-buy-button list_buy_button_1897"

first i bind the event to my checkboxes

$(".avtalsbox").each(function()
{
    $(this).click(function()
    { 
      chbclickeventhandler(this);
    });
});

then i handle it with this function.. this i where i encounter a problem

i have tried many solutions but noone works?

function chbclickeventhandler(thebox)
{

    if (thebox.checked) {

    //SOLUTION 1
    var button = $(thebox).closest("[class*='buy_button']");    
    $(button).removeAttr("disabled");

    //SOLUTION 2
    var button = $(thebox).parent().children("[class*='buy_button']");    
    $(button ).removeAttr("disabled"); 
    }
}

this is how my html looks like

<div class="buyonly boxhighlight varmepaket1">
<div width="100%" style="float:right;"> 
<!---köpknapp--->
<form class="product_form" action="/shoppingcart/increase_product_count/" method="post">
  <input type="hidden" name="quantity" value="1" id="quantity">
  <span class="button-container pie">
  <!-- THIS IS THE INPUT I WANT TO REMOVE DISABLED FROM ASWELL AS ADD IT -->
    <input class="button primary  pie list-buy-button list_buy_button_1903" type="submit" value="Beställ idag!" disabled="">     
  </span>
  <!---crap--->
  <input type="hidden" name="product_id" value="1903">
  <input type="hidden" name="article_number" value="varmepaket2">      
</form>
<!---köpknapp END---> 
</div>

<div width="" style="float:right;">
<a href="#" onclick="eb_klarna_sum=14990; $('body').find('#klarna_payment').click(); return false;">
  <img class="symbol" src="/layouts/focus/klarna_symbol.png"> Dela upp betalningen från xxx  kr/mån</a></div>

 <div style="float:left;"><input type="checkbox" class="avtalsbox" name="godkannavtalet" value="varmepaket1">Jag godkänner avtalet!</div>
</div>

I'm trying to build a general function that get's called from four different checkboxes. When the checkbox is checked it should remove the attribute disabled from a button near the checkbox.

my buttons all have diffrent classes like this

button 1: class="button primary pie list-buy-button list_buy_button_1903"

button 2: class="button primary pie list-buy-button list_buy_button_1901"

button 3: class="button primary pie list-buy-button list_buy_button_1899"

button 4: class="button primary pie list-buy-button list_buy_button_1897"

first i bind the event to my checkboxes

$(".avtalsbox").each(function()
{
    $(this).click(function()
    { 
      chbclickeventhandler(this);
    });
});

then i handle it with this function.. this i where i encounter a problem

i have tried many solutions but noone works?

function chbclickeventhandler(thebox)
{

    if (thebox.checked) {

    //SOLUTION 1
    var button = $(thebox).closest("[class*='buy_button']");    
    $(button).removeAttr("disabled");

    //SOLUTION 2
    var button = $(thebox).parent().children("[class*='buy_button']");    
    $(button ).removeAttr("disabled"); 
    }
}

this is how my html looks like

<div class="buyonly boxhighlight varmepaket1">
<div width="100%" style="float:right;"> 
<!---köpknapp--->
<form class="product_form" action="/shoppingcart/increase_product_count/" method="post">
  <input type="hidden" name="quantity" value="1" id="quantity">
  <span class="button-container pie">
  <!-- THIS IS THE INPUT I WANT TO REMOVE DISABLED FROM ASWELL AS ADD IT -->
    <input class="button primary  pie list-buy-button list_buy_button_1903" type="submit" value="Beställ idag!" disabled="">     
  </span>
  <!---crap--->
  <input type="hidden" name="product_id" value="1903">
  <input type="hidden" name="article_number" value="varmepaket2">      
</form>
<!---köpknapp END---> 
</div>

<div width="" style="float:right;">
<a href="#" onclick="eb_klarna_sum=14990; $('body').find('#klarna_payment').click(); return false;">
  <img class="symbol" src="/layouts/focus/klarna_symbol.png"> Dela upp betalningen från xxx  kr/mån</a></div>

 <div style="float:left;"><input type="checkbox" class="avtalsbox" name="godkannavtalet" value="varmepaket1">Jag godkänner avtalet!</div>
</div>

• javascript
• jquery

• 2 Please spend more time cleaning up your code. As with rooms, so too with code, leaving a mess will be a haven for bugs. – zzzzBov Commented Sep 4, 2013 at 21:32
• I imagine this code is producing an error on the JavaScript console. That would be a great place to start. – David Commented Sep 4, 2013 at 21:33
• Okay code is autogenerated from the backend, so I'm just working with the finshed output. As for the console I'm not stupid, of course I have looked into that the object returned does not have a reference to the button. – 8bitcat Commented Sep 4, 2013 at 21:41

3 Answers 3

Your usage of closest is incorrect try this way: Closest will only get you to the parent or itself provided there is a match in the selector. So here use closest to get to the parent div with the class .buyonly and find for the button inside that.

$(".avtalsbox").change(chbclickeventhandler);

function chbclickeventhandler() {
    if (this.checked) {
    //SOLUTION 1
        var button = $(this).closest(".buyonly").find("[class*='buy_button']");
        $(button).prop("disabled", false);
    }
}

Fiddle

If you are looking to toggle the button then you can just do:

$(".avtalsbox").change(chbclickeventhandler);

function chbclickeventhandler() {
    $(this)
        .closest(".buyonly")
        .find("[class*='buy_button']")
        .prop("disabled", !this.checked);

}

In your case checkbox is not a children of button, so you cannot use closest!

use

 $(thebox).closest('.product_form').find(["class*='buy_button']");