I'm trying to dynamically remove the 'readonly' attribute from some HTML elements.

I've created a [JSFiddle here][1] to show my issue, here is my code snippet:

$('#theButton').on('click', function() {
  $('#mySelect').removeProp('readonly');
  $('#textInput').removeProp('readonly');
  //stop the form posting back
  return false;
})

<script src=".1.1/jquery.min.js"></script>
<form>
  <label>Some input fields</label>
  <input type='text' class='form-control' id='textInput' readonly>
  <select id='mySelect' readonly class='form-control input-sm '>
    <option>1</option>
    <option>2</option>
    </select>
  <button class='btn btn-primary' id='theButton'>
    Enable Button
    </button>
</form>

I'm trying to dynamically remove the 'readonly' attribute from some HTML elements.

I've created a [JSFiddle here][1] to show my issue, here is my code snippet:

$('#theButton').on('click', function() {
  $('#mySelect').removeProp('readonly');
  $('#textInput').removeProp('readonly');
  //stop the form posting back
  return false;
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Some input fields</label>
  <input type='text' class='form-control' id='textInput' readonly>
  <select id='mySelect' readonly class='form-control input-sm '>
    <option>1</option>
    <option>2</option>
    </select>
  <button class='btn btn-primary' id='theButton'>
    Enable Button
    </button>
</form>

• javascript
• jquery
• html

• 1 select readonly? maybe disabled? use .prop() – guradio Commented Jun 5, 2017 at 8:21
• 1 You can use removeAttr or [prop](api.jquery./prop/) and set your prop to false. – Anthony Commented Jun 5, 2017 at 8:26

3 Answers 3

Your use of removeProp is incorrect.

The .removeProp() method removes properties set by the .prop() method.

Take a look what JQuery doc says:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property pletely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

You have to use prop property to do this

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

Fiddle

SNIPPET

$('#theButton').on('click', function() {
  $('#mySelect').prop('disabled', false);
  $('#textInput').prop('readonly', false);
  return false;
})

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <label>Some input fields</label>
   <input type='text' class='form-control' id='textInput' readonly>
   <select id='mySelect' disabled class='form-control input-sm '>
       <option>1</option>
       <option>2</option>
   </select>
   <button class='btn btn-primary' id='theButton'>Enable Button </button>
</form>

You should use the attr function of jQuery:

$('#mySelect').attr("readonly", false);
$('#textInput').attr("readonly", false);

While using prop instead will work too, the best practice for your situation is to use attr.

The documentation of jQuery's .removeProp() clearly states that it shouldn't be used to remove native properties.

Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property pletely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Use .prop('readonly', false) instead to make your textbox writable. Also, as @guradio suggested, select boxes don't have readonly property. Please use .prop('disabled', false) to prevent users editing it.

More details here.