.prop ('disabled', true); does not work in function Each JS

Question

.prop ('disabled', true); does not work in function Each JS

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)

2

My idea is for my form to go through the inputs of type number and if the total of these is higher than the variable faltan then disable the inputs that are at zero. Apparently the function works to a certain extent, but when it comes to disabling inputs it does not ....

 let faltan = 5;
        let total = 0;
        $('input[type=number]').change(function() {
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() === 0) {
                        $(this).prop('disabled', true);
                    }
                });
            } else {
                $('input[type=number]').prop('disabled', false);
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

javascript each

asked by Pavlo B. 06.08.2018 в 17:41

source

3 answers

2

You are very close to what you want. Two things are missing:

Change === to == when you check if the value equals 0.

The variables faltan and total must be declared within .change() , otherwise the calculation is incorrect.

Something like this:

        $('input[type=number]').change(function() {
            let faltan = 5;
            let total = 0;
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() == 0) {
                        $(this).prop('disabled', true);
                    }
                });
            } else {
                $('input[type=number]').prop('disabled', false);
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

answered by 06.08.2018 в 17:55

0

The value you want to give the property is disabled = "disabled" . Therefore: .prop("disabled", "disabled")

On the other hand, the value of an input is a string, so === is not evaluating the condition well.

Here you can see a working example:

let faltan = 5;
        let total = 0;
        $('input[type=number]').change(function() {
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
                console.log(total);
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() == 0) {
                        $(this).prop('disabled', "disabled");
                    }
                });
            } else {
                console.log("enable");
                $('input[type=number]').each(function() {
                  $(this).prop('disabled', false);
                });
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

As a last comment, I suspect that the logic in this line is not right:

total = parseInt(total) + parseInt($(this).val());

since it makes the total always increase, and the inputs are never re-enabled. I do not know what you want to do exactly ...

answered by 06.08.2018 в 17:54

How to handle ERROR .Find (). Column in VBA? Select HTML elements inside another with jQuery

score 2 · Accepted Answer

Your problem is here% of%

if ($(this).val() === 0) {

You have to replace it with ===

if ($(this).val() == 0) {

Basically == converts types and == does not

Your === have as value $(this).val()

   '0' ==  0     :> True
    0  ==  0     :> True
   '0' == '0'   :> True



  '0' ===  0  :> False
  '0' === '0' :> True
   0  ===  0  :> True