-1

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?

Improve this question
1
  • I had looked at that, but found nothing there that worked. Commented Feb 5, 2018 at 20:04

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

didn't work for me.
Maybe something else in your code mess things up? can you please post it? Does the snippet in my answer works for you?
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?
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.
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: <input type = "radio" class = "moxradio round" name = "#colu#subh" id = "subh_h_#jsort#" onchange = "rephidcol('#jsort#')" value = "h">hidden
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.