Changing the 'disabled' attribute with javascript

Question

I have a problem with a button attribute. It does not matter whether YES or NO is changed. I suspect the problem here is button.disabled because it does not highlight the word "disabled".

window.onload = function() 
{
    var button = document.getElementsByName("button");
    var regulamin = document.getElementsByName("accept");
 
  //console.log(button);

   for (var i = 0; i < regulamin.length; i++)
   {
       regulamin[i].onclick = function()
       { 
        //alert(this.value === "true");  <-- here is OK
           button.disabled = (this.value === "true");  <-- not OK
       };
   }

};

<form>
    <div>
        <label><input type="radio" name="accept" value="true" checked>NO</label>
        <label><input type="radio" name="accept" value="false">YES</label>
    </div>
    <button type="submit" name="button" disabled>REGISTER</button>
</form>

Console.log (button) gives 1 element (there is one button on the page) and it is set to disabled: true — Kamil Fajbuś, Jul 21 '17 at 18:10

score 0 · Accepted Answer · answered Jul 21 '17 at 18:25

0

DEMO

window.onload = function() 
{
    var button = document.getElementsByName("button")[0];
    var regulamin = document.getElementsByName("accept");
 
  console.log(button);

   for (var i = 0; i < regulamin.length; i++)
   {
       regulamin[i].onclick = function()
       { 
        //alert(this.value === "true");  <-- here is OK
           button.disabled = (this.value === "true");  
       };
   }

};

<form>
    <div>
        <label><input type="radio" name="accept" value="true" checked>NO</label>
        <label><input type="radio" name="accept" value="false">YES</label>
    </div>
       <button type="submit" name="button" disabled>REGISTER</button>
</form>

getElementsByName reutrns an array of element having the same name. So you need to choose which element you want. You have only one button so you can access the element like document.getElementsByName("button")[0]

answered Jul 21 '17 at 18:25

Durga

15,263
2
28
52

WOW thank you very much :) – Kamil Fajbuś Jul 21 '17 at 18:28
@DownVote , can you share it why so??? – Durga Jul 21 '17 at 18:29
I do not know why I reacted like this .. I clicked on UP .. I'm sorry – Kamil Fajbuś Jul 21 '17 at 18:32
@KamilFajbuś Happy coding:) – Durga Jul 21 '17 at 18:34

Roko C. Buljan · Answer 2 · 2017-07-21T18:54:38.643

You could

target your named radio buttons
forEach → assign a change event handler
retrieve the .closest (parent) form
than go back down the DOM and find your type="submit"

Chrome icon Firefox icon Edge icon Opera icon Safari icon ⁹

Array.from(document.querySelectorAll("[name='accept']")).forEach( radio => {
  radio.addEventListener("change", function() {
    this.closest("form").querySelector("[type='submit']").disabled = this.value === "true";
  });
});

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

With the above you can even have multiple forms on a single page - since the encapsulated DOM traversing.

Array.from(document.querySelectorAll("[name='accept']")).forEach( radio => {
  radio.addEventListener("change", function() {
    this.closest("form").querySelector("[type='submit']").disabled = this.value === "true";
  });
});

<h3>Multiple forms</h3>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

score -1 · Answer 3 · answered Jul 21 '17 at 18:26

You need to change your button from a "name" to an "id" and then get its element by "id". See the code below. The button toggle on the no yes now works correctly.

HTML:

    <form>
        <div>
            <label><input type="radio" name="accept" value="true" checked>NO</label>
            <label><input type="radio" name="accept" value="false">YES</label>
        </div>
        <button type="submit" id="button">REGISTER</button>
    </form>

Javascript:

window.onload = function () {
    var button = document.getElementById("button");
    var regulamin = document.getElementsByName("accept");
    button.disabled = true;
    //console.log(button);

    for (var i = 0; i < regulamin.length; i++) {
        regulamin[i].onclick = function () {
            //alert(this.value === "true");  <-- here is OK
            if (button.disabled) {
                button.disabled = false;
            } else {
                button.disabled = true;
            }                
        };
    }
};

Not sure why the downvote; its a different way of approaching the problem but this code does work — JJWillMC, Jul 21 '17 at 18:29

score -2 · Answer 4 · answered Jul 21 '17 at 18:02

-2

I think your name property of input element is same and you are getting getElementByName. Its getting both as true.

Try to give other input element with different name property.

answered Jul 21 '17 at 18:02

Rahul Beniwal

639
4
9

Console.log (button) gives 1 element (there is one button on the page) and it is set to disabled: true – Kamil Fajbuś Jul 21 '17 at 18:09
If I click on "NO" the alert returns False but does not assign it to the button attribute – Kamil Fajbuś Jul 21 '17 at 18:26

Changing the 'disabled' attribute with javascript

4 Answers4