Помогите допилить скрипт
Помогите пожалуйста допилить скрипт
На выходе хочу получить следующее: 1. Есть чекбокс, ставишь галочку -> открывается поле (работает) 2. Заполняешь значение цифрой -> идет подсчет (Работает) (при условии если в других стоит значение 0 ( если нет то NaN - не могу понять как обойти )) 3. при снятии галочки сброс input значения на 0 (работает) 4. Функция change() все равно оставляет значение поля которое было перед этим и соответственно кнопка "Выбрать" остается активной
<input id="checki1" type="checkbox" name="out[]" value="67" onchange="document.getElementById('submit1').disabled = !this.checked;inputchange();">
<input id="submit1" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />
<input id="checki2" type="checkbox" name="out[]" value="69" onchange="document.getElementById('submit2').disabled = !this.checked;inputchange();">
<input id="submit2" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />
<input id="checki3" type="checkbox" name="out[]" value="66" onchange="document.getElementById('submit3').disabled = !this.checked;inputchange();">
<input id="submit3" type="text" name="w[]" class="form-control" required disabled oninput="change()" value="0" />
<button id="submit" type="submit" class="btn btn-primary btn-lg btn-block" disabled>Выбрать</button>
// Функция которая удаляет значение переводя на 0
function inputchange()
{
var chkd1 = document.getElementById('checki1').checked;
if(chkd1 === false)
{
document.getElementById('submit1').value = 0;
}
var chkd2 = document.getElementById('checki2').checked;
if(chkd2 === false)
{
document.getElementById('submit2').value = 0;
}
var chkd3 = document.getElementById('checki3').checked;
if(chkd3 === false)
{
document.getElementById('submit3').value = 0;
}
}
// Функция которая считает общее значение введенных в поле цифр (блокируя кнопку отправить)
function change()
{
var inp1 = document.getElementById('submit1').value;
var inp2 = document.getElementById('submit2').value;
var inp3 = document.getElementById('submit3').value;
var inptotal = parseInt(inp1) + parseInt(inp2) + parseInt(inp3);
document.getElementById('wtotal').innerHTML = inptotal ;
if (inptotal <= 100 )
{
document.getElementById('submit').disabled = false;
}
else
{
document.getElementById('submit').disabled = true;
}
}
|
eLDeR,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p id="wtotal">0</p>
<form action="https://">
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<button type="submit" class="btn btn-primary btn-lg btn-block" disabled>Выбрать</button>
</form>
<script>
var form = document.querySelector("form"),
check = form.querySelectorAll(".out"),
num = form.querySelectorAll(".form-control"),
btn = form.querySelector(".btn"),
p = document.querySelector("#wtotal"),
dis = function(elem, removeDisabled) {
removeDisabled ? elem.removeAttribute("disabled") : elem.setAttribute("disabled", "disabled")
},
total = function(event) {
var sum = 0;
check.forEach(function(inp, i) {
var elem = num[i], checked = inp.checked;
elem.value = checked ? +elem.value || 0 : 0;
dis(elem, checked);
sum += +elem.value
});
dis(btn, sum > 100);
p.innerHTML = sum;
return sum > 100
};
form.addEventListener("change", total);
form.addEventListener("input", total);
form.addEventListener("submit", total);
</script>
</body>
</html>
|
А почему не свойство изменять?
dis = function(elem, removeDisabled) {
elem.disabled = !removeDisabled
}
|
laimas,
можно и свойство. |
Спасибо, на хроме работает, но в IE11 он не работает.
Мой опубликованный - работает, но не полностью. |
Цитата:
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
};
|
подскажите, как сделать так если стоит 0 в значении то кнопка тоже не активна при условии
dis(btn, sum <= 100); |
Цитата:
|
Если галочку снимаю, то идет сброс на ноль.
Кнопка при условии dis(btn, sum <= 100);Активна
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p id="wtotal">0</p>
<form action="https://">
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<input type="checkbox" name="out[]" class="out"/>
<input type="text" name="w[]" class="form-control" required disabled value="0" />
<button type="submit" class="btn btn-primary btn-lg btn-block" disabled>Выбрать</button>
</form>
<script>
var form = document.querySelector("form"),
check = form.querySelectorAll(".out"),
num = form.querySelectorAll(".form-control"),
btn = form.querySelector(".btn"),
p = document.querySelector("#wtotal"),
dis = function(elem, removeDisabled) {
removeDisabled ? elem.removeAttribute("disabled") : elem.setAttribute("disabled", "disabled")
},
total = function(event) {
var sum = 0;
check.forEach(function(inp, i) {
var elem = num[i], checked = inp.checked;
elem.value = checked ? +elem.value || 0 : 0;
dis(elem, checked);
sum += +elem.value
});
dis(btn, sum <= 100);
p.innerHTML = sum;
return sum <= 100
};
form.addEventListener("change", total);
form.addEventListener("input", total);
form.addEventListener("submit", total);
</script>
</body>
</html>
|
eLDeR,
так зачем вы меняли строки 39 и 41? |
| Часовой пояс GMT +3, время: 21:47. |