CODEWITHSUNDEEP
javascriptjqueryhtml
Mr Giggles
Mr Giggles

Reputation: 2104

Can't remove readonly from a html select using jQuery

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.com/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>

Upvotes: 1

Views: 3880

Answers (3)

Nadir Laskar
Nadir Laskar

Reputation: 4170

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 completely 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.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/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>

Upvotes: 3

31piy
31piy

Reputation: 23869

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 completely 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.

Upvotes: 2

Alon
Alon

Reputation: 11955

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.

Upvotes: 3

Related Questions