在动态生成的行中选择超过 5 次时如何禁用选项？

Question

以下是我的代码：

<tr class = "dynamicRow">
    <td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
                                        </td><td >
                                         <logic:present name="studentList">
                                            <html:select property="dgList[0].stuCreate"
                                            styleId="stuselect" onchange="setStudentLimit(this);">
                                                <html:option value="">
                                                    <bean:message key="label.student.code" />
                                                </html:option>
                                                <html:optionsCollection name="masStudentForm"
                                                    property="studentList" label="label" value="value" />
                                            </html:select>
                                        </logic:present> 
                                            </td>
                                        </div>
....
</tr>

在该行的末尾，我有一个添加按钮，将在其中添加此下拉菜单 dynamically.Along 此下拉菜单中还有许多其他文本字段。

我的要求：当用户在下拉列表中选择相同的选项时，应该禁用该值的 5 倍以上的值。应该在此下拉列表的 Onchange() 上发生。请帮忙。

Answer 1

您首先需要使用 .val() 获取您选择的值，然后您需要 遍历表中的所有选择 以查看有多少次选择该值。如果该值匹配，则 increment 计数，最后您可以检查计数值是否为 > 5 然后显示警报或禁用该选项。

演示代码（带有虚拟数据）：

function setStudentLimit(el) {
  var intKeyCount = 0;
  var value = $(el).val(); //get that value
  //iterate through all selects
  $('.dynamicRow select').each(function() {
    //if value matches
    if ($(this).val() === value) {
      intKeyCount++; //increment
    }
  }); 
  if (intKeyCount > 5) {
    alert("you cannot choose again");
    //or disable that option
    //$(el).find("option:selected").prop('disabled',true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
 <tr>
 <th>Selects</th>
 </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
</table>

在动态生成的行中选择超过 5 次时如何禁用选项？

How to disable an option when selected more than 5 times in dynamically generated rows?

html

javascript

jquery

dynamic

jquery-ui-multiselect