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

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

Following is my code :

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

At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.

My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.

Solution

You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.

Demo Code ( with dummy datas) :

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>