Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ally.element.disabled Example</title>
</head>
<body>
​
<article id="example-introduction">
  <h1><code>ally.element.disabled</code> Example</h1>
​
  <p>There are three buttons, the &quot;disable element&quot; button allows you to toggle the disabled state of the other two. One of the two example buttons is a real button, the other is a <code>&lt;div role=&quot;button&quot;&gt;</code></p>
</article>
​
<div id="example-html">
  <main>
    <button id="toggle-disabled" type="button" data-state="disable">disable elements</button></main></div>
​
    <hr>
​
    <div class="disable-target" id="target-div" role="button" tabindex="0" onclick="return false">example div</div>
    <button class="disable-target" id="target-button" type="button">example button
<script src="https://cdn.jsdelivr.net/ally.js/1.4.1/ally.min.js"></script>
</button></body>
</html>
​
 
​
var button = document.getElementById('toggle-disabled');
var targets = document.querySelectorAll('.disable-target');
button.addEventListener('click', function(event) {
  var state = this.getAttribute('data-state');
  if (state === 'disable') {
    // disable elements
    ally.element.disabled(targets[0], true);
    ally.element.disabled(targets[1], true);      
    // update toggle button
    this.setAttribute('data-state', 'enable');
    this.textContent = 'enable elements';
  } else {
    // enable elements
    ally.element.disabled(targets[0], false);
    ally.element.disabled(targets[1], false);
    // update toggle button
    this.setAttribute('data-state', 'disable');
    this.textContent = 'disable elements';
  }
}, false);
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rodneyrehmpro
0viewers