Javascript.. Disable a #div using pure JS?

Question

I've searched stackoverflow and gone through many pages deep in google. Nothing helped me to disable my button. So I come here wishing someone can help me.

Here's the button I'm trying to disable.

EDIT: This is different than the surposed dublicate as you said yourself, this is a div with a link and not a button.

<div class="de elBTN elAlign_center elMargin0 ui-droppable de-editable" id="button-80437" data-de-type="button" data-de-editing="false" data-title="button" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 30px; outline: currentcolor none medium; cursor: pointer; display: block;" data-elbuttontype="2" aria-disabled="false" data-element-theme="customized">
  <a href="#" class="elButton elButtonSize1 elButtonColor1 elButtonRounded elButtonPadding2 elButtonCorner3 elBtnHP_25 elBTN_b_1 elBTNone elButtonBlock elButtonFull elBtnVP_5 elButtonShadow5 elButtonTxtColor1 de1pxLetterSpacing no-button-effect" style="color: rgb(255, 255, 255); background: rgb(1, 116, 199);; font-size: 20px;" data-show-button-ids="tmp_paragraph-42317,headline-29302" data-hide-button-ids="headline-71892,button-80437" id="undefined-503">
    <span class="elButtonMain">YES</span>
    <span class="elButtonSub" style="font-size: 14px;">I Understand</span>
  </a>
</div>

This is what I'm trying to do.

ver = iOSversion(); 
if (ver[0] <= 11.4) { 
  alert('Your OS is below 11.4, please use a different device.'); 
  document.getElementById('button-80437').disabled = true;
} 
function disableEnable(elems, isDisabled){ 
  for(var i = elems.length-1;i>=0;i++) {
    elems[i].disabled = isDisabled;
  }
}

tried with these aswell.. nothing.

var div = document.getElementsById("button-80437");
disableEnable(div.getElementsByTagName("button"), true);

EDIT: Thanks for your answers. I appreciate it. Unfortunatly there isn't much I can do to change it to a button as its made using a wysiwyg "clickfunnels".

Maybe I could do this instead.

How do I disable a href link in JavaScript?

Inject href="javascript: void(0)" ?

Possible duplicate of [How to disable HTML button using JavaScript?](https://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript) — Jorge Fuentes González, Oct 27 '18 at 15:39
@AlonEitan cut OP some slack - it's a new contributor. And, in fairness, way to post code is not super well designed - you have inline code samples and code blocks and the two function completely differently. It's quite understandable why they are frequently misused. As existing members we have the tools to help and we're expected to. You yourself could have edited the question and formatted the code in about the same time it took to write that comment. — VLAZ, Oct 27 '18 at 15:42
@vlaz You have a code editor to create a working snippet, what more would you need? I tried to take a look at the question, it had like a million classes and attributes so I didn't want to do it myself. It's first of all the OP's responsibility — Alon Eitan, Oct 27 '18 at 15:45
@AlonEitan and a person who registered *today* is supposed to be completely familiar with every posting option available? And the way to guide them is to be cross with them instead of *showing* how it's done? We are on a Q&A site where the community is expected to not only answer but help out improving questions. I thought you should be familiar with that and yet here we are. — VLAZ, Oct 27 '18 at 15:55

score 0 · Answer 1 · answered Oct 27 '18 at 15:46

0

The div element does not have a disabled attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

If you use a button instead, you would be able to set the disabled attribute to disable the button. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

It looks like you might be using a framework that wants you to disable buttons in a different way. It would help if you included that information.

answered Oct 27 '18 at 15:46

katzenbar

36
1

Thanks for the info, yes I am using clickfunnels a wysiwyg of some type. I don't control much, only some styles and what the button should do. – MSoulja Oct 27 '18 at 17:24

Ruben Swieringa · Answer 2 · 2018-10-27T15:56:30.703

0

Like Jorge said, the main problem in your code is you’re trying to disable a non-formelement.

You can either:

Disable the <div> you have by putting the CSS pointer-events: none on your HTML-element *
Change your <div> into a <button> (which is a form-element) and use your current approach (setting the disabled property in Javascript)

* You can find browser-support information on pointer-events here: https://caniuse.com/pointer-events

edited Oct 27 '18 at 15:56

answered Oct 27 '18 at 15:50

Ruben Swieringa

71
6

I'm afraid if I put the pointer-events: none that it could be over riding using the inspector? – MSoulja Oct 27 '18 at 17:20
Well your JS+CSS should only be responsible for presenting a UI for doing things. Actually guarding your application from being abused by an ill-intending user is the main responsibility of the serverside (after that, responsibility of the JS). In other words: yes the CSS can be overridden in the webinspector, but so can the Javascript. So, typically, your CSS would show the button as disabled; Your Javascript would not send a request on click; Your serverside would double-check that the user can do what they’re trying to do (if there is any serverside part to your functionality). – Ruben Swieringa Oct 28 '18 at 21:27
Nope, no serverside part on that platform. – MSoulja Nov 08 '18 at 11:53

score 0 · Answer 3 · answered Oct 27 '18 at 15:55

0

i got what you are trying to do.So listen

1) "disabled" works on Buttons

2) What you have is "not a button" but "a hyperlink inside div"

3) so what can you do?

you got to play with the styles to show that your "joker button" is disabled

if( version < 11.4 ) {
  // make element div style looks like its disabled
  // <a href="#"> 
}
else{
  // make element div style looks like it is active
  // <a href="<your-link-url>"
}

answered Oct 27 '18 at 15:55

Lakshaya Sood

92
1
4

Thanks, yes thats what I will try. – MSoulja Oct 27 '18 at 17:22

Javascript.. Disable a #div using pure JS?

3 Answers3