Clicking the parent of an HTML select

Question

I cannot seem to click the parent of a select when it is disabled. I'm trying to allow the user to unlock inputs by clicking them, but it only works for inputs.

    let $input = $('input')
    $input.parent().click(function() {
      $input.prop('disabled', false);
    })
    let $select = $('select')
    $select.parent().click(function() {
      $select.prop('disabled', false);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="parent">
      <input name="name" disabled placeholder="click me">
    </div>
    <div class="parent">
      <select name="thing" disabled>
        <option value="1">1</option>
      </select>
    </div>

Possible duplicate of [Clicking disabled select element doesn't trigger click or mousedown events on it's parent](https://stackoverflow.com/questions/26503746/clicking-disabled-select-element-doesnt-trigger-click-or-mousedown-events-on-it) — Obsidian Age, Jan 30 '18 at 21:44

score 6 · Accepted Answer · answered Jan 30 '18 at 21:45

Add this style:

select[disabled] {
  pointer-events: none;
}

That will cause a disabled select to ignore the mouse, which allows its parent to capture the click instead.

Snippet:

let $input = $('input');
$input.parent().click(function() {
  $input.prop('disabled', false);
});

let $select = $('select');
$select.parent().click(function() {
  $select.prop('disabled', false);
});

select[disabled] {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <input name="name" disabled placeholder="click me">
</div>
<div class="parent">
  <select name="thing" disabled>
    <option value="1">1</option>
  </select>
</div>

Clicking the parent of an HTML select

1 Answers1