Enable disabled dropdown with onclick

Question

I have a disabled drop down that I only want enabled after it has been clicked. I have tried several methods, the following being the latest incarnation that doesn't work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {

$("input:disabled").closest("div").click(function() {

$(this).find("input:disabled").attr("disabled", false).focus();

});

});

<div>
  <select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</div>

https://stackoverflow.com/questions/3100319/event-on-a-disabled-input — epascarello, Aug 14 '18 at 20:48
Which is the exact method I quoted, which doesn't work with select. I am asking a different question as I need a different method to work with selects in a form. — user1724365, Aug 14 '18 at 20:54
The pattern seems weird you need to click to enable. Only way around it would be a layer on top of the select and than remove attr and focus. — epascarello, Aug 14 '18 at 20:59
example? I see what you are saying but don't know how to accomplish it. — user1724365, Aug 14 '18 at 21:02

chebaby · Accepted Answer · 2018-08-14T21:24:20.960

1

$(function() {

 $('div > div').on('click', function(event) {

  $(this).hide().prev('select:disabled').removeAttr('disabled').focus();
  
 });

});

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

 <form action="" id="myForm">

  <div style="display:inline-block; position:relative;">
   <select name="test" id="testing" disabled>
    <option name="first" value='first'>first</option>
    <option name="second" value="second">second</option>
   </select>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
  </div>

 </form>
</body>
</html>

edited Aug 14 '18 at 21:24

answered Aug 14 '18 at 20:52

chebaby

7,362
50
46

@epascarello, i'm sorry, but are you the one posting the question?! – chebaby Aug 14 '18 at 20:55
1

"I have a disabled drop down that I only want enabled after it has been clicked." Just stated in the first sentence in their question. Your code does not work when it is clicked. Disabled elements eat the events.... – epascarello Aug 14 '18 at 20:56
That is the best I got to as well chebaby, if you click on the very outside of the select it works but not when you click on the select itself. – user1724365 Aug 14 '18 at 20:57
Perfect!! Thank you so much! – user1724365 Aug 14 '18 at 21:58
@user1724365, I am glad I was able to help. – chebaby Aug 14 '18 at 23:07

epascarello · Answer 2 · 2018-08-14T21:25:08.070

This will detect the click on it by using CSS to add a layer over the select, but it still is not the best since it still requires more action from the user to open up the options. So it is basically a double click.

var elem = document.querySelector('span.cover');

function listener () {
  elem.classList.remove('active');
  elem.removeEventListener('mousedown', listener)
  var sel = elem.querySelector('select');
  sel.removeAttribute('disabled');
  sel.focus();
}


elem.addEventListener('mousedown', listener)

span.cover {
    position:relative;
}
span.active.cover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<span class="cover active">
  <select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>

If you want to do it with jQuery

$(document).on('click','span.active', function(){
  $(this).removeClass('active').find('select').removeAttr('disabled');
})

span.cover {
    position:relative;
}
span.active.cover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cover active">
  <select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>

<span class="cover active">
  <select name="test" id='testing2' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>

Ok, but what about multiple selects in the same form. What would be the easiest way to handle that? The double click is perfectly acceptable. — user1724365, Aug 14 '18 at 21:17
@user1724365 seems weird you picked the other answer that requires two elements to be added and not just adding the second element with CSS. Whatever, your code base.... — epascarello, Aug 15 '18 at 12:50

Enable disabled dropdown with onclick

2 Answers2