There is no special disabled property for DIV elements. For DIV elements, we have to show another DIV on top of the present div element. The cover DIV won't be have any content and it is transparent. Users can see content through this cover div.

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

CSS

myDiv is main div. cover div is for blocking main div
#myDIV {
    overflow: scroll;
    height: 300px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 300px;
    cursor: pointer;
    position: relative;
}

#cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: #ddd;
    opacity: 0.3;
}

Script

Observe below code
import React from 'react'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
       disableDiv: false
    };
    this.disableDiv = this.disableDiv.bind(this);
    this.enableDiv = this.enableDiv.bind(this);
  }

  disableDiv() {
    this.setState({
       disableDiv:true
    });
  }

  enableDiv() {
    this.setState({
       disableDiv:false
    });
  }

  render() {
    var divStyle = {
      display:this.state.disableDiv?'block':'none'
    };
    return (
      <div>
        <button onClick={this.disableDiv}>Disable Below UI</button>
        <button onClick={this.enableDiv}>Enable Below UI</button>

        <div id="myDIV">
          <div id="cover" style={divStyle}></div>
          div 1<br /> <a href="">link 1</a>
        </div>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

6 comments:

  1. Very detail-oriented post! We at http://writingdaddy.com/
    have a large number of readers so i think having it disseminated on a more popular website and to the bigger population of readers.I think you need a little more marketing to get these ideal readers and improve your web visibility.

    ReplyDelete
    Replies
    1. I agree with you. I too have found services from http://writingdaddy.com/ are very useful indeed. Apart from the that i also am a regular reader of their blog. This blog can improve a lot im sure.

      Delete
  2. I used it on my react app and it didn't work.
    "react": "^16.6.0",
    "react-dom": "^16.6.0",

    ReplyDelete
  3. It does not disable....It hides the elemet wrong solution...:(

    ReplyDelete

Blogroll

Popular Posts