How to select checkbox selection serially. JQuery or JavaScript-CodePudding

I have a education management system. I want to apply a condition If select January then check February. Without selection January no body can select February.

If anyone select January, February, March. Then uncheck January. Automatically uncheck February and March.

Here is my html code. How can i applay in here jquery or javascript.

<table>
    <tbody>
        <tr>
            <th>January</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall1" onclick="selectAll1(this,'color1')">
            </td>
            <td>7000</td>
        </tr>
        <tr>
            <th>February</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall2" onclick="selectAll2(this,'color2')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>March</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall3" onclick="selectAll3(this,'color3')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>April</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall4" onclick="selectAll4(this,'color4')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>May</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall5" onclick="selectAll5(this,'color5')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>June</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall6" onclick="selectAll6(this,'color6')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>July</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall7" onclick="selectAll7(this,'color7')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>August</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall8" onclick="selectAll8(this,'color8')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>September</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall9" onclick="selectAll9(this,'color9')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>October</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall10" onclick="selectAll10(this,'color10')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>November</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall11" onclick="selectAll11(this,'color11')">
            </td>
            <td>800</td>
        </tr>
        <tr>
            <th>December</th>
            <td style="text-align: center;">
                <input type="checkbox"  id="selectall12" onclick="selectAll12(this,'color12')">
            </td>
            <td>800</td>
        </tr>
        <tr >
            <th>Grand Total</th>
            <td></td>
            <th>15800</th>
        </tr>
    </tbody>
</table>

CodePudding user response：

Interesting challenge

This works as I understand the specs

const $months = $("[data-color]");
$months.on("click", function() {
  const idx = $months.index(this)
  if (this.checked && idx > 0) { // only check from Feb onwards
    const checked = $("[data-color]:lt("   idx   ")").map(function() { return this.checked }).get()
    this.checked = checked.every(c => c); // only allow checking if previous are checked
  } else $("[data-color]:gt("   idx   ")").prop("checked", false)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>January</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall1" data-color="color1">
      </td>
      <td>7000</td>
    </tr>
    <tr>
      <th>February</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall2" data-color="color2">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>March</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall3" data-color="color3">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>April</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall4" data-color="color4">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>May</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall5" data-color="color5">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>June</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall6" data-color="color6">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>July</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall7" data-color="color7">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>August</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall8" data-color="color8">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>September</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall9" data-color="color9">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>October</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall10" data-color="color10">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>November</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall11" data-color="color11">
      </td>
      <td>800</td>
    </tr>
    <tr>
      <th>December</th>
      <td style="text-align: center;">
        <input type="checkbox"  id="selectall12" data-color="color12">
      </td>
      <td>800</td>
    </tr>
    <tr >
      <th>Grand Total</th>
      <td></td>
      <th>15800</th>
    </tr>
  </tbody>
</table>

CodePudding user response：

You can have a helper function to determine every time someone tries toggling the checkbox. Your set of condition would go there, if true, let them toggle, else don't.

You could generate an object with month name and number of months prior.

{ "JANUARY": 0, ..., "JULY": 6, ..., "DECEMBER": 11 }

This way you just have to track the count of rows before to decide whether the toggleRequest is allowed for a particular checkbox or not.