Develop Reference

how to disable and enable textbox when a checkbox is checked

I have here multiple checkboxes which data is from the database. I want that the textbox will be remained disable until I checked or clicked the checkbox. lets just say this is the data that came from the database for example.
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$('.checks').removeAttr('disabled');
$('.checks').focus();
} else {
$('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

Sure, you can reduce what you have to just the following, using $(this) to refer to the specific checkbox you're checking/unchecking:
$(function() {
$('.check').click(function() {
$(this).next().prop('disabled', !$(this).is(':checked'))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$(this).next('.checks').removeAttr('disabled');
$(this).next('.checks').focus();
} else {
$(this).next('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>

how to add value from range input to total amount?

I managed to summarize the values from the radio buttons, but I just can’t add the values from range inputs, how can this be implemented??
And yet, since the slider on the two range inputs initially has a value of 1, then in Sum: should already be 2.
$(document).ready(function() {
$(".in_objem").on('input', function() {
$(".range-indicator").text($(this).val());
});
$(".in_nagrev").on('input', function() {
$(".nagrev-indicator").text($(this).val());
});
// $(".in_objem").on('input', function() {
// var elem= parseInt($(this).val());
// });
$(".premium-inpts").on('click', function(){
var sum = 0;
$('.premium-inpts').each(function(){
if ($(this).is(':checked')){
sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
}
});
console.log(sum);
$("#price-board").text(sum);
$("#output-price").val(sum);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<span class="nagrev-indicator">1</span><span>units1</span>
</div>
<div>
<input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<div>
<span class="range-indicator">1</span><span>units2</span>
</div>
<div>
<input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<input class="premium-inpts" id="a" type="radio" value="work">
<label class="flexy-block" for="a" price="300">
<span>Work</span>
</label>
<input class="premium-inpts" id="b" type="radio" value="chill">
<label class="flexy-block" for="b" price="20">
<span>Chill</span>
</label>
</div>
<div class="motors-container">
<input class="premium-inpts" id="c" type="radio" value="Automatic">
<label class="flexy-block" for="c" price="90">
<span>Automatic</span>
</label>
<input class="premium-inpts" id="d" type="radio" value="Common">
<label class="flexy-block" for="d" price="0">
<span>Common</span>
</label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">
Perhaps this is done somehow through an array, but I am not very good at js, so do not judge strictly.

You can sum the value of all the checked radio buttons with the slider value on the input event:
$(".in_objem,.in_nagrev").on('input', function() {
var elem = 0;
//sum the slider value
$(".in_objem,.in_nagrev").each(function(){
elem += Number($(this).val());
});
var v = 0;
//sum the checked radio buttons
$('.premium-inpts:checked').each(function(){
v = v + parseInt($(this).next('.flexy-block').attr("price"));
});
$("#price-board").text(v + elem);
$("#output-price").val(v + elem);
});
$(".in_objem,.in_nagrev").trigger('input'); // trigger the event to show the sum on page load
Working Code Example:
$(document).ready(function() {
$(".in_objem").on('input', function() {
$(".range-indicator").text($(this).val());
});
$(".in_nagrev").on('input', function() {
$(".nagrev-indicator").text($(this).val());
});
$(".in_objem,.in_nagrev").on('input', function() {
var elem = 0;
$(".in_objem,.in_nagrev").each(function(){
elem += Number($(this).val());
});
var v = 0;
$('.premium-inpts:checked').each(function(){
v = v + parseInt($(this).next('.flexy-block').attr("price"));
});
$("#price-board").text(v + elem);
$("#output-price").val(v + elem);
});
$(".in_objem,.in_nagrev").trigger('input');
$(".premium-inpts").on('click', function(){
var sum = 0;
var n1 = Number($('.in_objem').val());
var n2 = Number($('.in_nagrev').val());
sum = n1+n2;
$('.premium-inpts:checked').each(function(){
sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
});
//console.log(sum);
$("#price-board").text(sum);
$("#output-price").val(sum);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<span class="nagrev-indicator">1</span><span>units1</span>
</div>
<div>
<input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<div>
<span class="range-indicator">1</span><span>units2</span>
</div>
<div>
<input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
<label class="flexy-block" for="a" price="300">
<span>Work</span>
</label>
<input class="premium-inpts" id="b" type="radio" value="chill">
<label class="flexy-block" for="b" price="20">
<span>Chill</span>
</label>
</div>
<div class="motors-container">
<input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
<label class="flexy-block" for="c" price="90">
<span>Automatic</span>
</label>
<input class="premium-inpts" id="d" type="radio" value="Common">
<label class="flexy-block" for="d" price="0">
<span>Common</span>
</label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

You need to get the value of the range objects and parse them to numbers and add them in your sum:
$(document).ready(function() {
$(".in_objem").on('input', function() {
$(".range-indicator").text($(this).val());
});
$(".in_nagrev").on('input', function() {
$(".nagrev-indicator").text($(this).val());
});
//$(".in_objem").on('input', function() {
// var elem= parseInt($(this).val());
//});
$(".premium-inpts").on('click', function(){
var sum = 0;
$('.premium-inpts').each(function(){
if ($(this).is(':checked')){
sum = sum + parseInt($(this).next('.flexy-block').attr("price")) + parseInt($(".in_objem").val(),10)+ parseInt($(".in_objem").val(),10) ;
}
});
console.log(sum);
$("#price-board").text(sum);
$("#output-price").val(sum);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<span class="nagrev-indicator">1</span><span>units1</span>
</div>
<div>
<input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<div>
<span class="range-indicator">1</span><span>units2</span>
</div>
<div>
<input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
</div>
</div>
<div>
<input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
<label class="flexy-block" for="a" price="300">
<span>Work</span>
</label>
<input class="premium-inpts" id="b" type="radio" value="chill">
<label class="flexy-block" for="b" price="20">
<span>Chill</span>
</label>
</div>
<div class="motors-container">
<input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
<label class="flexy-block" for="c" price="90">
<span>Automatic</span>
</label>
<input class="premium-inpts" id="d" type="radio" value="Common">
<label class="flexy-block" for="d" price="0">
<span>Common</span>
</label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

As mentioned by aprouja1, you need to get their values. An easy way to do this, is by giving both range sliders an ID in HTML.(For Example slider1 & slider2).
Then use document.getElementById("slider1").value & document.getElementById("slider2").value to get their values. You can save these to a variable and calculate the sum this way.
let slider1Value = document.getElementById("slider1").value;
let slider2Value = document.getElementById("slider2").value;
sum = slider1Value + slider2Value;

Javascript - Calculating Sum of Checkboxes From Array

Based on the answers below I have edited the post to give some more details. Thanks everyone.
EDITED:
This is the code I have:
#foreach($amount_data as $amount)
<div class="col-sm-12">
<div class="input-checkbox">
<div class="inner"></div>
<input type="checkbox" name="items[]" value="{{$amount->amount}}" onchange="checkTotal()" />
</div>
<span>{{$amount->item_name}} - <b>{{$amount->amount}} {{$form->currency}}</b></span>
</div>
#endforeach
<br/> Total: <input type="text" size="2" name="total" value="0" />
#endif
Javascript:
<script type="text/javascript">
function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}
</script>
Form info:
<form action="{{url('secure-checkout/'.$form->unique_url_code)}}" method="POST" id="payment-form" name="payment-form">
Doesn't seem to work. No errors in console. Anything wrong?

You would need to use bracket notation because of the [] in the name
document.listForm["items[]"][i].checked
function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}
<form name="payment-form" id="payment-form">
<input type="checkbox" name="items[]" value="2" onchange="checkTotal()" />2<br/>
<input type="checkbox" name="items[]" value="5" onchange="checkTotal()" />5<br/>
<input type="checkbox" name="items[]" value="10" onchange="checkTotal()" />10<br/>
<input type="checkbox" name="items[]" value="20" onchange="checkTotal()" />20<br/>
Total: <input type="text" size="2" name="total" value="0" />
</form>

Here is an answer using jQuery. Hope this helps a bit! I've separated the listener and the function as I believe it makes things easier to edit later on. You could combine them to shorten the code.
//Listener for the checkbox
$("input[name='choice']").change(function() {
sumUp();
});
//Funtion that adds the total up
function sumUp() {
var sum = 0;
$(" input[name='choice']:checked").each(function() {
sum += parseInt($(this).val());
});
$("input[name=total]").val(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="listForm">
<input type="checkbox" name="choice" value="2" />2
<br/>
<input type="checkbox" name="choice" value="5" />5
<br/>
<input type="checkbox" name="choice" value="10" />10
<br/>
<input type="checkbox" name="choice" value="20" />20
<br/> Total:
<input type="text" size="2" name="total" value="0" />
</form>

You can get the Sum of checked checkboxes array by simply using Array.prototype.reduce():
function checkTotal() {
document.listForm.total.value = Array.prototype.reduce.call(
document.listForm.choice,
function (sum, el) {
return el.checked ? sum + +el.value : sum;
}, 0
);
}
<form name="listForm">
<input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
<input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
<input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
<input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>
</form>

Calculate total on checkbox checked

HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..

Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE

$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

How to sum value of radio button and checkbox in jquery

I have a code already working which calculates the sum of the radio buttons. I changed my mind in one of the radio button group and decided to make it a checkbox. When I tick items on the checkbox, the sum returns NaN. What would I add/change in my jquery in order for it to recognize the checkbox value?
Here's my code:
JQuery
< script type = "text/javascript" >
function calcscore() {
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
< /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
Appreciate all the help.

This code code should answer your question:
function calcscore() {
score = 0;
$(".calc:checked").each(function () {
score += Number($(this).val());
});
$("#price").text(score.toFixed(2));
$("#sum").val(score)
}
$().ready(function () {
$(".calc").change(function () {
calcscore()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" value="100" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
</li>
<input type="hidden" name="sum" id="sum" value="0">
<p>Total: PHP <span id="price">0</span>
</p>

for your markup and usecase as it stands now in the question.try this
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).parent().next().val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
try this,you dont need hidden fields for values.i removed them and used value property of checkbox.
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="100" id="rad1" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" />
</label>
</li>
<p>Total: PHP <span id="price">0</span>
</p>