从SELECT中删除只读属性

Remove Readonly attr from SELECT

本文关键字：只读属性 删除 SELECT      更新时间：2023-09-26

我有一个点击事件，当用户点击具有readonly状态的select元素时触发。

我遇到的问题是，当readonly状态从select元素中移除时，点击事件仍然存在。

这里是一个DEMO

你会注意到，当你点击select元素时，顶部函数仍然运行，即使select不再是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!');
});

有办法解决这个问题吗?我知道我可以通过某种方式添加/删除类来实现这一点，但我宁愿不使用这种方法。

您只需要使用事件委托.on()，这样它就会考虑到按钮单击所做的DOM更改:

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

希望他能帮到你。

$('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>

我认为您需要删除onClick事件，因为它已经添加到列表中。不管你把Readonly属性改成什么，"onclick"事件还是会运行。

你可以检查这个jQuery方法http://api.jquery.com/off/来删除点击事件处理程序

由于readonly是一个属性，您应该使用.prop(propertyName, value)

为匹配元素集设置一个或多个属性。

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

您应该使用disabled属性而不是readonly，然后您不需要绑定/解绑定事件处理程序。

<select disabled>
</select>

小提琴

你有两个问题。

首先

select[readonly]将针对具有readonly属性的select，当它为false时也是如此。要解决这个问题，请使用removeAttr('readonly') .

第二

选择已经绑定了点击事件。因此，使用过滤器将函数绑定到表单上。

一起:

$('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>

或者更新后的Fiddle

一个更好的解决方案是使用一个类，readonly属性不会阻止点击事件:

$('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>

相关文章：