I created a form and as long as the inputs that have the required attribute are empty, the button will keep disabled.

When only the inputs with the required attribute are filled in, the button will be enabled.

How to do this with javascript?

    // select all input with Attribute Required
    let elReq =
          document.querySelectorAll('input[required="required"]');

    // if elReq input is empty = .button disabled
    if (elReq.value == "") {
        document.querySelector('.button').disabled = true; 
        
    // if elReq input is filled in = .button enabled
    } else {
        document.querySelector('.button').disabled = false; 
    }

      .button {
            color: #fff;
            background-color: #007bff;
            border: none;
            display: inline-block;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            cursor: pointer;
        }
      .button:disabled {
            color: #a2a5a9;
            border-color: #c9ced3;
            background-color: #f2f2f2;
            cursor: text;
        }

<form  id="form">
        <input type="number" id="a"  placeholder="000" required>
        <input type="number" id="b"  placeholder="0">

        <input type="number" id="c"  placeholder="000" required>

        <input type="number" id="d"  placeholder="000" required>
        
        <input type="number" id="e"  placeholder="0">     
    </form>

        <button type="submit" value="Ok" id="send"  onclick="sum()">Ok</button>

Basically, it's a common form. If the user doesn't fill in the mandatory fields, he won't be able to have access to the next step. For example, a login form: if the user doesn't fill the "e-mail" and the "password" inputs, the button "next" cannot be clicked. It's the same principle.

CodePudding user response：

This code should work.

Several weird things I think you should change.

1. You doesn't have the eventListener, so once the document load, it will check if the input has value or not (which always be "")
2. You have several things in the input has required attribute, so you have to use querySelectorAll instead of querySelector and a loop to loop it

document.querySelectorAll('[required]').forEach(item=>{
item.addEventListener('change',check)
window.addEventListener('load',check)
})

function check(){
for(let i of document.querySelectorAll('[required]')){
  if (!i.value) {
        document.querySelector('.button').disabled = true; 
        break;      
    } else {
    document.querySelector('.button').disabled = false;        
    }
}
}

.button {
            color: #fff;
            background-color: #007bff;
            border: none;
            display: inline-block;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            cursor: pointer;
        }
      .button:disabled {
            color: #a2a5a9;
            border-color: #c9ced3;
            background-color: #f2f2f2;
            cursor: text;
        }

<form  id="form">
        <input type="number" id="a"  placeholder="000" required>
        <input type="number" id="b"  placeholder="0">

        <input type="number" id="c"  placeholder="000" required>

        <input type="number" id="d"  placeholder="000" required>
        
        <input type="number" id="e"  placeholder="0">     
    </form>

        <button type="submit" value="Ok" id="send" >Ok</button>