How to enable select tag from disabled state by double clicking on it?

Question

I want to make enable the select tag from disabled state by double click on disabled state.

I tried this but it is not working. I don't know where I have made mistakes. Please, help me to get out from this mistakes. Thanks in advance.

$(document).ready(function() {
  $("select").dblclick(function() {
    $(this).removeAttr('disabled', false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="area" disabled name="area" required>
  <option value="Adabar Thana">Adabar Thana</option>
  <option value="Azampur">Azampur</option>
  <option value="Badda Thana">Badda Thana</option>
  <option value="Bangsal Thana">Bangsal Thana</option>
</select>

Just as an aside-- consider accessibility and keyboard navigability and screen reader for this feature. How will a user who cannot see the screen and who cannot use a mouse interact with this interface? — Alexander Nied, May 26 '21 at 15:00

score 1 · Answer 1 · answered May 26 '21 at 13:28

The issue is because disabled elements do not accept events, therefore the dblclick to enable the select again will never (and can never) fire. You will need to use another element to capture the click and enable the select, for example a button:

jQuery($ => {
  $("button").on('click', e => {
    $(e.target).prev('select').prop('disabled', (i, d) => !d);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="area" disabled name="area" required>
  <option value="Adabar Thana">Adabar Thana</option>
  <option value="Azampur">Azampur</option>
  <option value="Badda Thana">Badda Thana</option>
  <option value="Bangsal Thana">Bangsal Thana</option>
</select>
<button type="button">Toggle</button>

@Rony McCrossan is it possible to achieve what I wanted using readonly instead of disabled property? — Ashikur Rahman, May 26 '21 at 13:33
Unfortunately not, as the `select` element does not support the `readonly` attribute — Rory McCrossan, May 26 '21 at 15:02

score 0 · Accepted Answer · answered May 26 '21 at 13:31

0

Disabled input doesn't fire mouse click event.

So you need to wrap it in a div and listen to the double-click of the div. When the div is double clicked. You look for the select inside and remove the disabled attribute.

<div id="areaclick">
  <select id="area" disabled name="area" required>
    <option value="Adabar Thana" >Adabar Thana</option>
    <option value="Azampur" >Azampur</option>
    <option value="Badda Thana" >Badda Thana</option>
    <option value="Bangsal Thana" >Bangsal Thana</option>
  </select>
</div>

<script>
  $(document).ready(function(){
    $("#areaclick").dblclick(function(){
      $(this).find("select").removeAttr('disabled', false);
    });
  });
</script>

answered May 26 '21 at 13:31

Guillaume Côté

16
1
2

Cote Thanks for your answer. It is actually what I wanted. – Ashikur Rahman May 26 '21 at 13:49
1

Note that this won't work in Firefox (and probably anything other than Chrome) as events on disabled elements do not bubble up the DOM in those browsers. – Rory McCrossan May 26 '21 at 13:57
1

For what its worth, after @RoryMcCrossan pointed out on my similar answer that this wouldn't work in Firefox, I did some research updated my post to a Firefox-compatible solution that is also more accessible. For anyone visiting this post with scenarios in which FF support or accessibility are considerations, then you can check it out: https://stackoverflow.com/questions/67705735/how-to-enable-select-tag-from-disabled-state-by-double-clicking-on-it/67706025#67706025 – Alexander Nied May 28 '21 at 19:03

score 0 · Answer 3 · edited Nov 12 '21 at 05:29

UPDATED ANSWER:

After user Rory McCrossan pointed out that this wouldn't work on Firefox, I was inspired to try to find a solution that would, that would also be moderately more accessible to screen-reader and keyboard users. I came up with the following:

const enableSelect = () => {
    const selectWrapper = $("#select-wrapper")
    $(selectWrapper).removeAttr('aria-label');
    $(selectWrapper).find("select")
      .removeAttr('disabled', false)
      .toggleClass('.disable-pointer')
      .focus();
  };

$(document).ready(() => {
  $("#select-wrapper")
    .on('click', enableSelect)
    .on('keypress', (e) => {
      if (e.key === 'Enter') {
        enableSelect();
      }
    });
});

.disable-pointer {
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>
<div id="select-wrapper" tabIndex="0" aria-label="click here to enable options">
  <select class="disable-pointer" id="area" disabled name="area" required>
    <option value="Adabar Thana">Adabar Thana</option>
    <option value="Azampur">Azampur</option>
    <option value="Badda Thana">Badda Thana</option>
    <option value="Bangsal Thana">Bangsal Thana</option>
  </select>
</div>

This leverages the pointer-events: none solution recommended in this post. In addition, make the wrapper focusable, and give it a label via ARIA. Upon click or keypress of enter, we remove the label, enable the select and focus it. Depending on your intentions, it would probably be wise to also remove the tabIndex from the wrapper at this junction, and also probably give it a cleaner focus treatment that more emulates a button.

As I commented on your original post, this still may be inadvisable from an accessibility point of view-- I'd recommend testing with some screen readers, the keyboard, and checking browser accessibility trees to confirm everything is usable by those who might not be using a mouse and screen.

Original Answer Below

While the disabled <select> itself might not accept click events, you could always wrap it in a wrapper that can register the event:

$(document).ready(function() {
  $("#select-wrapper").dblclick(function() {
    $(this).find("select").removeAttr('disabled', false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-wrapper">
  <select id="area" disabled name="area" required>
    <option value="Adabar Thana">Adabar Thana</option>
    <option value="Azampur">Azampur</option>
    <option value="Badda Thana">Badda Thana</option>
    <option value="Bangsal Thana">Bangsal Thana</option>
  </select>
</div>

Note that this won't work in Firefox (and probably anything other than Chrome) as events on disabled elements do not bubble up the DOM in those browsers. — Rory McCrossan, May 26 '21 at 13:57
@RoryMcCrossan - thanks for pointing this out; I was hoping that if I used event capturing rather than bubbling I could solve this issue, but that's proving not to be true. I might poke it a bit and see if I can figure out a way around it, but I'm not optimistic. — Alexander Nied, May 26 '21 at 14:17

How to enable select tag from disabled state by double clicking on it?

3 Answers3

UPDATED ANSWER:

Original Answer Below