Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   Помогите допилить скрипт (https://javascript.ru/forum/css-html-internet-explorer/78367-pomogite-dopilit-skript.html)

eLDeR 02.09.2019 14:21

Помогите допилить скрипт
 
Помогите пожалуйста допилить скрипт
На выходе хочу получить следующее:
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;
	}
}

рони 02.09.2019 17:36

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>

laimas 03.09.2019 03:35

А почему не свойство изменять?

dis = function(elem, removeDisabled) {
        elem.disabled = !removeDisabled
    }

рони 03.09.2019 07:49

laimas,
можно и свойство.

eLDeR 03.09.2019 09:59

Спасибо, на хроме работает, но в IE11 он не работает.
Мой опубликованный - работает, но не полностью.

рони 03.09.2019 10:18

Цитата:

Сообщение от eLDeR
но в IE11 он не работает.

добавить в начало скрипта
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
};

eLDeR 03.09.2019 10:55

подскажите, как сделать так если стоит 0 в значении то кнопка тоже не активна при условии
dis(btn, sum <= 100);

рони 03.09.2019 14:28

Цитата:

Сообщение от eLDeR
подскажите

не понимаю.

eLDeR 03.09.2019 15:56

Если галочку снимаю, то идет сброс на ноль.
Кнопка при условии
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>

рони 03.09.2019 16:05

eLDeR,
так зачем вы меняли строки 39 и 41?


Часовой пояс GMT +3, время: 04:01.