CODEWITHSUNDEEP
javascriptjqueryformscheckboxinput
alejuu
alejuu

Reputation: 79

Check checkbox depending of price in span

So I have a donation form and people can select different amounts to donate, so I want to automatically check a checkbox if the donation amount is bigger or equal than 20.

This the html (the data total stays the same the text is the element that change)

<span class="give-final-total-amount" data-total="20.00">$455.00</span>
<input type="checkbox" value="2" name="group[12581][2]" id="mce-group[12581]-12581-1">

This what I'm trying with jQuery

$( document ).ready(function() {
if ($(".give-final-total-amount").text() >= 20.00)  {
jQuery("#mce-group[12581]-12581-1").prop("checked", true);
}
else {
    $("#mce-group[12581]-12581-1").prop("checked", false);
}
});

Upvotes: 0

Views: 82

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65845

The dollar sign is preventing your comparison from working. See additional comments below:

$(function() {
  // Get a reference to the checkbox
  var chk = document.getElementById("mce-group[12581]-12581-1");
  
  // You can't compare the value of the span against a number if the value is not-numeric
  // you have to remove the dollar sign first
  if ($(".give-final-total-amount").text().replace("$", "") >= 20)  {
    // No need for JQuery on this, just set the checked property to true
    chk.checked = true;
  } else {
    // Set checked property to false
    chk.checked = false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="give-final-total-amount" data-total="20.00">$455.00</span>
<input type="checkbox" value="2" name="group[12581][2]" id="mce-group[12581]-12581-1">

Upvotes: 2

Related Questions