Question

当用户点击具有select状态的readonly元素时，会触发点击事件。这很好。

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

您会注意到，当您点击select元素时，即使select不再是readonly

，也会运行top函数

$('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!');
});

有没有解决这个问题的方法？我知道我可以通过某种方式添加/删除一个类来实现这一点 - 但我宁愿不采用这种方法。

Answer 1

您只需要使用事件委派.on()，这样就会考虑按钮点击进行的DOM更改：

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

希望他的帮助。

＆＃13;

$('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!');
});

＆＃13;

select[readonly] {
  background-color: red; 
}

＆＃13;

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

＆＃13;

Answer 2

由于readonly是属性，因此您应使用.prop(propertyName, value)

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

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

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

<select disabled>
</select>

Fiddle

Answer 3

我认为您需要删除onClick事件，因为它已经添加到列表中。无论你改变属性Readonly，＆＃34; onclick＆＃34;事件无论如何都会运行。

您可以检查此jQuery方法http://api.jquery.com/off/以删除点击事件处理程序。

Answer 4

更好的解决方案是使用类，readonly属性不会停止click事件：

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

Answer 5

你有两个问题。

<强>第一

select[readonly]将定位具有属性readonly的选择，当它为false时也是如此。要解决此问题，请使用removeAttr('readonly')。

<强>第二

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

所有在一起：

＆＃13;

$('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!');
});

＆＃13;

select[readonly] {
  background-color: red; 
}

＆＃13;

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

＆＃13;

或updated Fiddle

从SELECT中删除Readonly attr

5 个答案: