We Keep Coding

hide button if price is 0,00€

how i can disable the button.single_add_to_cart_button in other div if i have price span.amount 0,00€?
Look code below:
<form class="cart" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div id="tm-extra-product-options" class="tm-extra-product-options tm-custom-prices tm-product-id-7045 tm-cart-main" data-product-id="7045" data-cart-id="main">
<div class="tm-totals-form-main" data-product-id="7045">
<input class="cpf-product-price" type="hidden" name="cpf_product_price" value="0">
<div id="tm-epo-totals" class="tm-epo-totals tm-custom-prices-total tm-cart-main" data-variations="[]" data-variations-subscription-period="[]" data-subscription-period="" data-variations-subscription-sign-up-fee="[]" data-subscription-sign-up-fee="0" data-prices-include-tax="" data-tax-display-mode="excl" data-tax-string="" data-tax-rate="22" data-taxable="1" data-force-quantity="0" data-tm-epo-dpd-suffix="" data-tm-epo-dpd-prefix="" data-fields-price-rules="0" data-product-price-rules="[]" data-price="0" data-type="simple" data-is-sold-individually="" data-is-subscription="" data-cart-id="main" data-theme-name="">
<dl class="tm-extra-product-options-totals tm-custom-price-totals">
<dt class="tm-options-totals">Options amount</dt>
<dd class="tm-options-totals">
<dt class="tm-final-totals">Prezzo Totale:</dt>
<dd class="tm-final-totals">
<span class="amount final">0,00€</span>
</dd>
</dl>
</div>
</div>
<div class="iva_esc">
<div class="quantity">
<input type="hidden" value="7045" name="add-to-cart">
<button class="single_add_to_cart_button button alt" type="submit" style="display: block;">Vai al pagamento</button>
Other user, have sended to me this code:
<script>
$(function() {
//check if all items are zero
var disable = $(".cart span.amount.final").toArray().every(function(item) {
return $(item).text() === "0,00€";
});
//disable button if necessary
$(".cart button.single_add_to_cart_button").prop("disabled", disable);
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This code work perfect, but now i need to active when priced is different to 0,00€

With jquery something like:
var value = $('.amount').text();
if(value === '0,00€') {
$('.single_add_to_cart_button').hide();
} else {
$('.single_add_to_cart_button').show();
}

var price = $(span.amount).val().split( '').map(Number)
This will split anything that's not a number, therefore you could use the following condition :
if(price >= 0 )
// do smth
else
// do smth else

Using jQuery:
<script>
var amount = parseFloat($('.amount').html().replace(",", "."));
if(amount === 0){
$('.single_add_to_cart_button').prop('disabled', true);
}else{
$('.single_add_to_cart_button').prop('disabled', false);
}
</script>
JSFiddle Demo

In WordPress 5.1.1 WooCommerce 3.5.5, hide the price if equals $0.00, hide the add to cart button and hide the quantity.
jQuery(document).ready(function($) {
var ptext = $(this).find('span.amount').text();
ptext = ptext.replace('$', '');
var nptext = parseInt(ptext);
if (nptext === 0) {
$('.quantity').hide();
$('.single_add_to_cart_button').hide();
$('.amount').hide();
} else {}
});
In WordPress 5.1.1 WooCommerce 3.5.5, this is the complete code that replaced the $0.00 with text, hides quantity, and replaces button with a click to call image.
jQuery(document).ready(function($) {
var ptext = $(this).find('span.amount').text();
ptext = ptext.replace('$', '');
var nptext = parseInt(ptext);
if (nptext === 0) {
$('.quantity').hide();
$('.single_add_to_cart_button').replaceWith('<img src="/wp-content/uploads/2019/03/fine-jewelry-call-button.jpg"/>');
$('.amount').html('<span style="color:#8160C4;font-size:18px;">Call 877-992-3377 for Promotion Price</span>');
} else {}
});

find a div by classname and replace it with a div based on onclick - jquery

There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance

What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle

EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.

Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})

Selecting a class of radio button inside a form

I am using jquery to display some forms depending on user input. I have a basic info to fill and then the user select radio buttons that will show one distinct form depending on the input (four radio buttons, 2 questions). The problem is that I don't know how to choose it, I want two distint functions for each question.
My Jquery code (just the idea of what I want):
$(document).ready(function () {
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () {
if ($(this).attr("value") == "1") {
$('#first').hide();
$('#second').show();
}
if ($(this).attr("value") == "2") {
$('#first').show();
$('#second').hide();
}
});
$('form[name="THE_FORM"]'.find('p.ISVH').click(function () {
if ($(this).attr("value") == "3") {
$('#third').hide();
$('#fourth').show();
}
if ($(this).attr("value") == "4") {
$('#third').show();
$('#fourth').hide();
}
});
});
HTML:
<div id="main">
<form name="The_FORM">
<p class = "ISVH"> <span> Is Virtual host? </span>
<label for="VH"> Yes <input id="VH" type="radio" name="VH" value="3"> </label>
<label for="NVH"> No <input id="NVH" type="radio" name="VH" value="4"> </label> </p>
<p class = "ISVM"> <span> Is Virtual Machine? </span>
<label for="VM"> Yes <input id="VM" type="radio" name="VM" value="1"> </label>
<label for="PM"> No <input id="PM" type="radio" name="VM" value="2"> </label> </p>
...divs first, second, third, fourth here...
</form>
</div>
I tried:
$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
Bit is not working..
What I am doing wrong here? How I write the jquery functions to select the what I want?

$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"]').find('p.ISVM').click(function () ...
while
$('form[name="THE_FORM"]: p.ISVM')).click(function () ...
should be
$('form[name="THE_FORM"] p.ISVM')).click(function () ...
Also, using name attribute is not as efficient as using an ID:
and then one of these would be my preference:
$('#THE_FORM').find('p.ISVM').click(function () ...
$('#THE_FORM p.ISVM').click(function () ...
or even
$('#THE_FORM').on('click', 'p.ISVM', function () ...
which does something else, but that something else is nice.
Even better, I'd probably disregard click and go directly for change event on inputs.

$(input[name*='VH']).change()
{
var vh= $(input[name*='VH']).val();
if (vh == 1 )
{
$('#first').hide();
$('#second').show();
} else if (vh == 2)
{
$('#first').show();
$('#second').hide();
}
}
$(input[name*='VM']).change(){
var vm = $(input[name*='VM']).val();
if (vm == 1 )
{
$('#third').hide();
$('#fourth').show();
} else if (vh == 2)
{
$('#fourth').hide();
$('#third').show();
}
}

Jquery how to count checkboxes from different divs

i have problem with counting checkboxes that are in different divs. It has to count if there is at least one checked checkbox checked in every div, and when there is, it makes a submit button active, else the submit button is inactive.
<div id="collapseOne">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
<div id="collapseTwo">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
$(document).ready(function() {
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if(($a && $b)>0 ){
$("#button").addClass('active')
}
else{
$("#button").removeClass('active').addClass('disabled')
}
});

You need to use length instead of lenght
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
as well as using:
if($a > 0 && $b>0 ){
instead of:
if(($a && $b)>0 ){
Edit: You also need to wrap your code inside change() function to keep track when your input has been changed:
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
$a = $('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b = $('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if (($a && $b) > 0) {
$("#button").addClass('active')
} else {
$("#button").removeClass('active').addClass('disabled')
}
}).change();
});
Fiddle Demo

Show div on radio button check

I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.
HTML
<div id="surv_radio4">
<p>
Merchant Site Property is
</p>
<input type="radio" id="owned" value="owned" name="merchant_property"/>
<label for="owned">Owned</label>
<input type="radio" id="leased" value="leased" name="merchant_property"/>
<label for="leased">Leased</label>
</div>
<div id="surv_5">
<label for="landlord_name" class="test">Landlord Name</label>
<input type="text" id="landlord_name" placeholder="Landlord Name"/>
<label for="landlord_phone">Phone Number</label>
<input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>
CSS
#surv_5 {
display: none;
}
Javascript
<script>
$(document).ready.(function() {
$("input[name$='merchant_property']").click(function() {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else if (value == 'owned') {
$("#surv_5").hide();
}
});
});
</script>

Your document.ready function has a syntax error (extra period):
$(document).ready(function () {
http://jsfiddle.net/isherwood/tW3D5/

Try this:
$("input[name$='merchant_property']").change(function () {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else {
$("#surv_5").hide();
}
});
Fiddle here.

On your original code, you also had an error on your else statement.. See fiddle here
Relevant bits below:
if (value == 'leased') {
$("#surv_5").show();
} else if(value == 'owned'){
$("#surv_5").hide();
}
UPDATE
Too late, looks like #Hiral has an answer for you....