Question

我在表格的每一行中的一个表单内的复选框上安装了以下委托事件：

jQuery(function() {
  var isChecked;
  $('#order-statuses-onweek tbody').on('change', 'form #order_status_p', function(event) {
    return $(this).parents('form').find('#order_status_s').attr('disabled', isChecked($(this))).toggleClass('disabled');
  });
  isChecked = function(el) {
    return $(el).prop('checked');
  };

我的问题是无论哪一行我点击一个复选框，它都是第一行只是更改。

示例行的实际代码，格式为：

<td>
  <form accept-charset="UTF-8" action="/order_statuses/776" class="form-inline" data-remote="true" id="edit_order_status_776" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="patch" /></div>
    <label class="checkbox" for="order_status_s">
      <input name="order_status[s]" type="hidden" value="0" />
      <input id="order_status_s" name="order_status[s]" type="checkbox" value="1" />Wózek
    </label>
    <label class="checkbox" for="order_status_p">
      <input name="order_status[p]" type="hidden" value="0" />
      <input id="order_status_p" name="order_status[p]" type="checkbox" value="1" />Produkcja
    </label>
  </form>
</td>

Answer 1

ID必须是唯一的。这就是它被称为ID的原因特定$('#id')的调用方法仅适用于与id匹配的第一个元素，而使用类$('.class')将适用于与该类匹配的所有元素。

如果您想与元素共享特征，事件或其他内容，则应始终使用类。

在您的示例中，只需更改

即可

<input id="order_status_s" name="order_status[s]" type="checkbox" value="1" />

到

<input class="order_status_s" name="order_status[s]" type="checkbox" value="1" />

并对order_status_p执行相同操作。

然后，在您的javascript / jQuery代码中，将#更改为.：

$('#order-statuses-onweek tbody').on('change', 'form .order_status_p', function(event) {
    return $(this).parents('form').find('.order_status_s').attr('disabled', isChecked($(this))).toggleClass('disabled');
    });

每个表行中表单上的委托事件仅更改第一个表

1 个答案: