disable div class

[JamesCrandall]

Should be something simple I'm missing but having difficulty setting the property an html element.  The sample below is not working as expected -- I can click the element and it seems to execute when it should be "disabled".

This is the widget.html:

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍

This is the widget.js

startup: function () {

    // called on startup.           
     document.getElementById("refine-button").disabled = true;
    ‍‍‍‍‍

[KenBuja]

What I do with the WAB buttons is use the class 'jimu-state-disabled'. I have a function to enable or disable them. I also have my buttons set up slightly differently, using a data-dojo-attach-point to get at it

<div data-dojo-attach-point="btnApplyPriority" id="prioritybtn" class="jimu-btn apply" data-dojo-attach-event="onclick:applyEdits" style="margin-top: 5px">
  ${nls.applyPriority}
</div>‍‍‍‍‍‍‍‍‍

  _enableBtn(btn, isEnable) {
    if (btn) {
      if (isEnable) {
        html.removeClass(btn, 'jimu-state-disabled');
      } else {
        html.addClass(btn, 'jimu-state-disabled');
      }
    }
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and call it like this to disable the button.

this._enableBtn(this.btnApplyPriority, false);‍‍‍‍‍‍

You'll have to add the 'dojo/_base/html' module.

[JamesCrandall]

Ken, thanks for this!  Sorry for the late reply, still trying to implement and troubleshoot before posting.  It does seem to disable (appearance of the button) but the click event still works.  Looking to see if there's something else I have going on that is causing this.

[KenBuja]

What's your html looking like? Are you apply that class to the enveloping div (from your first post) or to the div with the onclick event?

[JamesCrandall]

I'm probably misunderstanding here and not correctly implementing.  I wanted to first make sure I'm not enabling that button/div somewhere else, so I double-checked that!

With that verified, I was hoping to disable the div from the JavaScript in the Startup function based upon the existence of a feature/graphic --- that is, checking to see if it exists and if not then disable that button.  Here's what I've got so far, no errors and it hops thru your suggested enableBtn function as expected but the button does not actually disable!

HTML:

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍‍‍‍

JS:

enableBtn: function (btn, isEnable) {
    if (btn) {
 if (isEnable) {
 html.removeClass(btn, 'jimu-state-disabled');
 } else {
     html.addClass(btn, 'jimu-state-disabled');
 }
     }
},
beginWork_ExistingBoundary: function(){
    this.getScratchGeometry().then(lang.hitch(this, function (scratchQueryResults) {
 this.originalGraphic = this.getGraphicFromQueryResults(scratchQueryResults);
 debugger
 if (!this.originalGraphic) {
     this.enableBtn(document.getElementById("refine-button"), false);  //this is where & when I'd like to disable the button functionality
 }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Again, thanks for your suggestions and input!

[KenBuja]

First try it this way

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div id="btnRefine" class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>  
</div>‍‍‍

this.enableBtn(document.getElementById("btnRefine"), false);‍

Then see if this works

<div class="workflow-step refine-application-boundaries" id="refine-button">
    <div data-dojo-attach-point="btnRefine" class="jimu-btn workflow-step-title" data-dojo-attach-event="click:activateRefineApplicationBorderTool">2. Refine Boundaries</div>
</div>‍‍‍

this.enableBtn(this.btnRefine, false);‍

[JamesCrandall]

Ken, both of these evaluate in the enableBtn function as expected but again I still see the same result: the button works when I click on it (ie. it is "enabled" somehow).

Browser cache?  I'll run thru trying to clear history.

[KenBuja · Accepted solution]

I apologize...I've been giving you false hopes. In my code, the onclick action is still active. The same test used to determine whether to enable/disable the button is also used in the onclick function to determine if it's OK to proceed.

First I see if the button is enabled

const features = this.myLayer.getSelectedFeatures();
this._enableBtn(this.btnApply, features.length > 0);‍‍‍‍‍‍‍‍‍

and in my onclick function code, I check that value again.

  applyEdits(evt) {
    const features = this.myLayer.getSelectedFeatures();
    if (features.length === 0) {
      return;
    }
    // rest of code
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JamesCrandall]

Ok!  Thanks again for your input!

[RobertScheitlin__GISP]

This is normally why I do not use 

data-dojo-attach-event

If you add the event handler in your widget.js then you can pause or add and remove the event listener as needed.