时间戳

首页 > 解决方案 > 具有相同值的多个选择执行此操作

javascript - 具有相同值的多个选择执行此操作

问题描述

我在表中有相同值的不同选择选项。当所有选择都获得相同的值（“2”）时，我如何做到这一点（将禁用的属性添加到输入）？

<table>
<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

<td>
  <select class="class1">
    <option value="1">SI</option>
    <option value="2">NO</option>
  </select>
</td>

</table>

<input type="checkbox" class="checkbox" id="x">

标签： javascriptjquery

解决方案

您可以按以下方式进行操作：将每个选择的值推送到数组中，并用于unique()仅保留唯一值。如果要在选择的值相同（1 或 2）的情况下禁用输入，请在此数组的长度为 1 时禁用输入。

$("select").on("change", function() {
  let a = [];
  $("select").each(function() {
    a.push($(this).val());
    $.unique(a);
  });
  if (a.length === 1) {
    $(".checkbox").attr("disabled", true);
  }
  else {
    $(".checkbox").removeAttr("disabled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

</table>

<input type="checkbox" class="checkbox" id="x">

如果您只想在所有选择的值为 2 时禁用输入，您可以执行以下操作：

$("select").on("change", function() {
  let a = [];
  $("select").each(function() {
    a.push($(this).val());
    $.unique(a);
  });
  if (a.length === 1 && $.inArray("2", a !== -1)) {
    $(".checkbox").attr("disabled", true);
  }
  else {
    $(".checkbox").removeAttr("disabled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

  <td>
    <select class="class1">
      <option value="1">SI</option>
      <option value="2">NO</option>
    </select>
  </td>

</table>

<input type="checkbox" class="checkbox" id="x">

推荐阅读