javascript - Jquery closest does not work? -


i'm trying build general function get's called 4 different checkboxes. when checkbox checked should remove attribute disabled button near checkbox.

my buttons have diffrent classes 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 bind event checkboxes

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

then handle function.. encounter problem

i have tried many solutions 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 how 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">   <!-- input want remove disabled aswell add -->     <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> 

your usage of closest incorrect try way: closest parent or provided there match in selector. here use closest parent div class .buyonly , find 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 looking toggle button can do:

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

Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -