javascript enable disabled button

Question

When event A happens I disable a button:

if (document.getElementById('detail_n').checked) {
  chkxp.disabled = true; }

But if event B happens I want to re-enable the button:

if (document.getElementById('detail_y').checked) {
  chkxp.disabled = false; }

That did not re-enable the button. I tried:

chkxp.removeAttribute('disabled');

That did not work either.

I HAVE LOOKED AT THE OTHER PAGES WHICH PRESENT SOLUTIONS, AND THEY ARE EXACTLY WHAT I ALREADY HAVE, WHICH IS NOT WORKING FOR ME. THAT IS WHY I AM ASKING AGAIN.

The only thing that worked is to re-submit the page. That would be a huge pain for the user, since there is a lot of stuff to fill into that form.

I'm in firefox. Can anyone give me a Javascript solution that does work?

I had looked at that, but found nothing there that worked. – Betty Mock Feb 05 '18 at 20:04 — Betty Mock, Feb 05 '18 at 20:04

Bitmap · Answer 1 · 2018-02-05T21:43:21.003

0

It seems to work fine with setting disabled to true and then removing the disabled attribute in order to re-enable the buttton. checkout MDN nd snippet below: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled

var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');

btn2.addEventListener('click', function (e) {
  if (btn.disabled === true) {
    btn.removeAttribute('disabled');
    console.log('Target is enabled');
  }
  else {
    console.log('Target is disabled');
    btn.disabled = true;
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="btn">Target</button>
  <button id="btn2">Click here !</button>
</body>
</html>

UPDATE

Snippet for radio buttons. if my snippet doesn't work on your browser, please check your browser settings.

var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

btn2.addEventListener('change',function () {
  if (btn2.checked === true) {
    btn.disabled = true;
  }
});

btn3.addEventListener('change',function () {
  if (btn3.checked === true) {
    btn.removeAttribute("disabled");
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="radio" id="btn"><label for="btn">Target</label>
  <input type="radio" name="x" id="btn2"><label for="btn2">Disable target</label>
  <input type="radio" name="x" id="btn3"><label for="btn3">Enable target</label>
</body>
</html>

edited Feb 05 '18 at 21:43

answered Feb 05 '18 at 19:04

Bitmap

106
2
9

didn't work for me. – Betty Mock Feb 05 '18 at 20:07
Maybe something else in your code mess things up? can you please post it? Does the snippet in my answer works for you? – Bitmap Feb 05 '18 at 20:33
This is not working. I have a radio button, not a regular button. Otherwise it seems the same. I included the relevant code in my question. What are you looking for? Do you want the HTML? – Betty Mock Feb 05 '18 at 21:06
Does your if statements are inside event listener? without listening to events you can't response to user actions. I edit my answer with a snippet for radio buttons, please check it out. – Bitmap Feb 05 '18 at 21:40
I'musing an onchange inside the radio button. If the user picks another button, that also has an onchange, so the program will catch it. I also change the color with the disable; and change it back when I set the disable to false. The color changes are working. Here is the calling code: hidden – Betty Mock Feb 05 '18 at 23:13
Hi Betty, you should **check your "rephidcol" function**. Also **be sure to remove cache from browser before you try to check your updated code**. Recommendation : In most cases you should use **Event Listeners** over inline event handlers (more info: https://stackoverflow.com/a/6348597/8737670). – Bitmap Feb 06 '18 at 11:22
I removed the javascript caching long ago. the rephidcol function seems to be working except for not re-enabling the disabled buttons. I know the event listener is recommended, but for now I'm using the more easily coded inline handler. – Betty Mock Feb 06 '18 at 17:43
Well, something must be faulty with your code. The way I mentioned is the right way to do it. I can try to help you if you post your full js & html. – Bitmap Feb 06 '18 at 17:49
I have hundreds of lines of HTML. Where would I post all that? – Betty Mock Feb 06 '18 at 23:31
Just post the relevant html – Bitmap Feb 07 '18 at 07:45
Well, I've worked around it by setting visibility to hidden. As I said, there are hundreds of lines of html, and I don't want to try to find a place to put them. – Betty Mock Feb 08 '18 at 20:59

javascript enable disabled button

1 Answers1

UPDATE