CODEWITHSUNDEEP
javascriptjquery
user5483305
user5483305

Reputation:

Remove Readonly attr from SELECT

I have a click event that is triggered when a user clicks on a select element that has a readonly state. This works fine.

The problem I have is that when the readonly state is removed from the select element, the click event is still present.

Here is a DEMO.

You will notice that when you click the select element, the top function still runs even though the select is no longer readonly

$('select[readonly]').on("click", function(e) {
  e.preventDefault();
  alert('This is readonly!');
});

$('button').on("click", function(e) {
  e.preventDefault();
  $('#div form select').attr("readonly", false);
  alert('Readonly Attr Removed!');
});

Is there a way around this issue? I know I could accomplish this with some way of adding/removing a class - but i'd rather not have that approach.

Upvotes: 2

Views: 105

Answers (5)

Satpal
Satpal

Reputation: 133403

Since readonly is a property, You should use .prop(propertyName, value)

Set one or more properties for the set of matched elements.

$('#div form select').prop("readonly", false);

You should use disabled property instead of readonly, then you don't need bind/unbind the event handler.

<select disabled>
</select>

Fiddle

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You need just to use event delegation .on() instead so it will take in consideration the DOM change made by the button click :

$('body').on("click",'select[readonly]', function(e) {

Hopet his helps.

$('body').on("click",'select[readonly]', function(e) {
  e.preventDefault();
  alert('This is readonly!');
});

$('button').on("click", function(e) {
  e.preventDefault();
  $('#div form select').attr("readonly", false);

  alert('Readonly Attr Removed!');
});
select[readonly] {
  background-color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <form>
    <div class="form-group">
      <select readonly="true">
        <option>Select an option</option>
        <option>option 2</option>
        <option>option 3</option>
      </select>
    </div>
  </form>
</div>
<br /><br />
<button>
  Remove Disabled Attr
</button>

Upvotes: 4

madalinivascu
madalinivascu

Reputation: 32354

A better solution will be to use a class,the readonly property will not stop the click event :

$('body').on("click",'select:not(.active)', function(e) {
  e.preventDefault();
  alert('This is readonly!');
});

$('button').on("click", function(e) {
  e.preventDefault();
  $('#div form select').addClass("active");
  $('#div form select').removeAttr('readonly');
  alert('Readonly Attr Removed!');
});


$('body').on("click",'select:not(.active)', function(e) {
  e.preventDefault();
  alert('This is readonly!');
});

$('button').on("click", function(e) {
  e.preventDefault();
  $('#div form select').addClass("active");
  $('#div form select').removeAttr('readonly');
  alert('Readonly Attr Removed!');
});
select[readonly] {
  background-color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <form>
    <div class="form-group">
      <select readonly="true">
        <option>Select an option</option>
        <option>option 2</option>
        <option>option 3</option>
      </select>
    </div>
  </form>
</div>
<br /><br />
<button>
  Remove Disabled Attr
</button>

Upvotes: 1

Doaa Magdy
Doaa Magdy

Reputation: 526

I think you need to remove the onClick event, as it's already added to the list. no matter you change the attribute Readonly, the "onclick" event will run anyway.

You can check this jQuery method http://api.jquery.com/off/ to remove on click event handler.

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You've got two problems.

First

select[readonly] will target a select that has the attribute readonly, also when it is false. To fix that, use removeAttr('readonly').

Second

The select already got the click event binded on it. So instead, bind the function on the form, with a filter.

All together:

$('form').on("click", 'select[readonly]', function(e) {
  e.preventDefault();
  alert('This is readonly!');
});

$('button').on("click", function(e) {
  e.preventDefault();
  $('#div form select').removeAttr("readonly");

  alert('Readonly Attr Removed!');
});
select[readonly] {
  background-color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <form>
    <div class="form-group">
      <select readonly>
      <option>Select an option</option>
      <option>option 2</option>
      <option>option 3</option>
      </select>
    </div>
  </form>
</div>
<br /><br />
<button>
Remove Disabled Attr
</button>

Or the updated Fiddle

Upvotes: 1

Related Questions