How to remove attribute disabled from select-CodePudding

How to correctly remove attribute "disabled" from select in html template? I created button and some select with few options:

<select id="testSelect" disabled>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

and next I would like to add script to remover that disabled atribute. I was trying with:

$("input[name=edit]").on("click", function () {
        document.getElementById('testSelect').disabled = false;
    })

but it does not work. It works with text inputs and checkboxes but with select I have problem.

CodePudding user response：

$("input[name=edit]").on("click", function() {
  document.getElementById('testSelect').disabled = false;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="edit" type="button" value="Presto, enable the select!">

<select id="testSelect" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Your code is working fine for me. I've added an input[name=edit] matching element. Clicking it does, indeed, make the select element enabled.

CodePudding user response：

You can do this by setting the .disabled property to false

const element = document.getElementById('testSelect')
element.disabled = false

<select id="testSelect" disabled>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

I'd assume that your script has issues with some other aspect that makes it not work, not 100% sure what though.