Как отключить и включить строку таблицы на основе флажка?

ProgramBox

Как отключить и включить строку таблицы на основе флажка?

Post author:admin
Запись опубликована:24 декабря, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я хочу отключить всю строку таблицы на основе щелчка флажка notcoverd и включить строку таблицы, если нажат какой-либо один флажок notcoverd. Функция, которую я написал, работает правильно, за исключением того, что один флажок снят.

 <tr>
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIP" class="chkBoxPer" style="text-align: center" type="checkbox" name="checkBoxPercent" value="1">
    </span>
  </td>
  <td style="text-align:left" class="txtPer">
    <strong id="lbl1">Inpatient(IP)</strong><button class="btn btn-sm hide arrowNone"><i class="fa fa-caret-down"></i></button>
  </td>

  <td>
    <asp:TextBox id="IINTier1Ip" CssClass="TxtBox12 txtDataPopTier1 clearValueIp" runat="server"></asp:TextBox><span id="Span15" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2Ip" CssClass="TxtBox12 txtDataPopTier2 clearValueIp" runat="server"></asp:TextBox><span id="Span16" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="OONIp" CssClass="TxtBox12 txtDataPopOON clearValueIp txtIpOon" runat="server"></asp:TextBox><span id="Span17" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIp" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>
<tr class="hidden toggle advanced"">
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIpMedical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1">
    </span>
  </td>
  <td style="text-align:left"><span style="padding-left: 3%">IP Medical</span></td>
  <td>
    <asp:TextBox id="IINTier1IpMedical" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMed clearValueIp" onInput="computeValue('#IINTier1IpMedical','#IINTier2IpMedical','#OONIpMedical')" runat="server"></asp:TextBox><span id="Span18" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2IpMedical" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMed clearValueIp" onInput="computeValue('#IINTier1IpMedical','#IINTier2IpMedical','#OONIpMedical')" runat="server"></asp:TextBox><span id="Span19" runat="server" class="pers">%</span>
  </td>

  <td>
    <asp:TextBox ID="OONIpMedical" CssClass="TxtBox12 txtDataPopOON clearValueIpMed txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span20" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIpMedical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>
<tr class="hidden toggle advanced">
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIpSurgical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1">
    </span>
  </td>
  <td style="text-align:left"><span style="padding-left: 3%">IP Surgical</span> </td>
  <td>
    <asp:TextBox id="IINTier1IpSurgical" CssClass="TxtBox12 txtDataPopTier1 clearValueIpSur clearValueIp" onInput="computeValue('#IINTier1IpSurgical','#IINTier2IpSurgical','#OONIpSurgical')" runat="server"></asp:TextBox><span id="Span21" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2IpSurgical" CssClass="TxtBox12 txtDataPopTier2 clearValueIpSur clearValueIp" onInput="computeValue('#IINTier1IpSurgical','#IINTier2IpSurgical','#OONIpSurgical')" runat="server"></asp:TextBox><span id="Span22" runat="server" class="pers">%</span>
  </td>

  <td>
    <asp:TextBox ID="OONIpSurgical" CssClass="TxtBox12 txtDataPopOON clearValueIpSur txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span23" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIpSurgical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>
<tr class="hidden toggle advanced">
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIpMeternity" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1">
    </span>
  </td>
  <td style="text-align:left"><span style="padding-left: 3%">IP Maternity</span> </td>
  <td>
    <asp:TextBox id="IINTier1IpMaternity" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMet clearValueIp" onInput="computeValue('#IINTier1IpMaternity','#IINTier2IpMaternity','#OONIpMaternity')" runat="server"></asp:TextBox><span id="Span24" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2IpMaternity" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMet clearValueIp" onInput="computeValue('#IINTier1IpMaternity','#IINTier2IpMaternity','#OONIpMaternity')" runat="server"></asp:TextBox><span id="Span25" runat="server" class="pers">%</span>
  </td>

  <td>
    <asp:TextBox ID="OONIpMaternity" CssClass="TxtBox12 txtDataPopOON clearValueIpMet txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span26" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIpMeternity" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>
<tr class="hidden toggle advanced">
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIpMHSA" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1">
    </span>
  </td>
  <td style="text-align:left"><span style="padding-left: 3%">IP MHSA</span></td>
  <td>
    <asp:TextBox id="IINTier1IpMHSA" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMhsa clearValueIp" onInput="computeValue('#IINTier1IpMHSA','#IINTier2IpMHSA','#OONIpMHSA')" runat="server"></asp:TextBox><span id="Span27" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2IpMHSA" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMhsa clearValueIp" onInput="computeValue('#IINTier1IpMHSA','#IINTier2IpMHSA','#OONIpMHSA')" runat="server"></asp:TextBox><span id="Span28" runat="server" class="pers">%</span>
  </td>

  <td>
    <asp:TextBox ID="OONIpMHSA" CssClass="TxtBox12 txtDataPopOON clearValueIpMhsa txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span29" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIpMHSA" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>
<tr class="hidden toggle advanced">
  <td>
    <span class="chkBoxcls">
      <input id="chkboxIpNICU" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1">
    </span>
  </td>
  <td style="text-align:left"><span style="padding-left: 3%">IP NICU</span> </td>
  <td>
    <asp:TextBox id="IINTier1IpNICU" CssClass="TxtBox12 txtDataPopTier1 clearValueIpNicu clearValueIp" onInput="computeValue('#IINTier1IpNICU','#IINTier2IpNICU','#OONIpNICU')" runat="server"></asp:TextBox><span id="Span30" runat="server" class="pers">%</span>
  </td>
  <td>
    <asp:TextBox ID="IINTier2IpNICU" CssClass="TxtBox12 txtDataPopTier2 clearValueIpNicu clearValueIp" onInput="computeValue('#IINTier1IpNICU','#IINTier2IpNICU','#OONIpNICU')" runat="server"></asp:TextBox><span id="Span31" runat="server" class="pers">%</span>
  </td>

  <td>
    <asp:TextBox ID="OONIpNICU" CssClass="TxtBox12 txtDataPopOON clearValueIpNicu txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span32" runat="server" class="pers">%</span>
  </td>

  <td>
    <span class="chkBoxcls">
      <input id="chkNotCoveredIpNICU" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp">
    </span>
  </td>
</tr>

js-файл

     //select all checkboxes
    $("#chkNotCoveredIp").change(function () {  //"select all" change 
        $(".chkNotCovIp").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
        $(".clearValueIp").prop("disabled", false);
        $(".clearValueIp").val('');
    });

    //".checkbox" change 
    $('.chkNotCovIp').change(function () {
        //uncheck "select all", if one of the listed checkbox item is unchecked
        if (false == $(this).prop("checked")) { //if this item is unchecked
           
            $(".clearValueIp").prop("disabled", false); // 
        }
        //check "select all" if all checkbox items are checked
        if ($('.chkNotCovIp:checked').length == $('.chkNotCovIp').length) {
            $("#chkNotCoveredIp").prop('checked', true);
            $(".clearValueIp").prop("disabled", true);
        }
    });

шаг 1 скриншот:

скриншот шага 2: здесь предполагается включить только строку, в которой снят флажок, но вся строка получает enable

1. Хотя я отредактировал ваш код для удобства чтения, я не исправил синтаксическую ошибку в вашем HTML <tr class="hidden toggle advanced""> с дублированными кавычками, которые необходимо исправить, я оставил их, потому что я не знаю, проблема ли это в вашем коде или просто одна из проблем с вашим кодом. Пожалуйста, рассмотрите возможность использования IDE.

2. Вместо false == $(this).prop("checked") вы можете написать !$(this).prop("checked") , prop(проверено) возвращает логическое значение, если вы хотите, чтобы false было true, просто ! IT

3. Пожалуйста, добавьте также свой CSS?

Ответ №1:

Вы можете добавить этот 'pointer-events':'none' CSS к td нему, чтобы отключить строку, кроме последнего td.

//select all checkboxes $("#chkNotCoveredIp").change(function () { //"select all" change $(".chkNotCovIp").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status $(".clearValueIp").prop("disabled", false); $(".clearValueIp").val(''); if( $(this).is(":checked") ){ $(this).closest('table').find('td:not(:last-child)').css({'pointer-events':'none','background-color':'grey'}); }else{ $(this).closest('table').find('td:not(:last-child)').css({'pointer-events':'auto','background-color':'white'}); } }); //".checkbox" change $('.chkNotCovIp').change(function () { //uncheck "select all", if one of the listed checkbox item is unchecked if (false == $(this).prop("checked")) { //if this item is unchecked $(".clearValueIp").prop("disabled", false); // } //check "select all" if all checkbox items are checked if ($('.chkNotCovIp:checked').length == $('.chkNotCovIp').length) { $("#chkNotCoveredIp").prop('checked', true); $(".clearValueIp").prop("disabled", true); } if( $(this).is(":checked") ){ $(this).closest('tr').find('td:not(:last-child)').css({'pointer-events':'none','background-color':'grey'}); }else{ $(this).closest('tr').find('td:not(:last-child)').css({'pointer-events':'auto','background-color':'white'}); } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <span class="chkBoxcls"> <input id="chkboxIP" class="chkBoxPer" style="text-align: center" type="checkbox" name="checkBoxPercent" value="1"> </span> </td> <td style="text-align:left" class="txtPer"> <strong id="lbl1">Inpatient(IP)</strong><button class="btn btn-sm hide arrowNone"><i class="fa fa-caret-down"></i></button> </td> <td> <asp:TextBox id="IINTier1Ip" CssClass="TxtBox12 txtDataPopTier1 clearValueIp" runat="server"></asp:TextBox><span id="Span15" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2Ip" CssClass="TxtBox12 txtDataPopTier2 clearValueIp" runat="server"></asp:TextBox><span id="Span16" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIp" CssClass="TxtBox12 txtDataPopOON clearValueIp txtIpOon" runat="server"></asp:TextBox><span id="Span17" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIp" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> <tr class="hidden toggle advanced""> <td> <span class="chkBoxcls"> <input id="chkboxIpMedical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1"> </span> </td> <td style="text-align:left"><span style="padding-left: 3%">IP Medical</span></td> <td> <asp:TextBox id="IINTier1IpMedical" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMed clearValueIp" onInput="computeValue('#IINTier1IpMedical','#IINTier2IpMedical','#OONIpMedical')" runat="server"></asp:TextBox><span id="Span18" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2IpMedical" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMed clearValueIp" onInput="computeValue('#IINTier1IpMedical','#IINTier2IpMedical','#OONIpMedical')" runat="server"></asp:TextBox><span id="Span19" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIpMedical" CssClass="TxtBox12 txtDataPopOON clearValueIpMed txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span20" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIpMedical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> <tr class="hidden toggle advanced"> <td> <span class="chkBoxcls"> <input id="chkboxIpSurgical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1"> </span> </td> <td style="text-align:left"><span style="padding-left: 3%">IP Surgical</span> </td> <td> <asp:TextBox id="IINTier1IpSurgical" CssClass="TxtBox12 txtDataPopTier1 clearValueIpSur clearValueIp" onInput="computeValue('#IINTier1IpSurgical','#IINTier2IpSurgical','#OONIpSurgical')" runat="server"></asp:TextBox><span id="Span21" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2IpSurgical" CssClass="TxtBox12 txtDataPopTier2 clearValueIpSur clearValueIp" onInput="computeValue('#IINTier1IpSurgical','#IINTier2IpSurgical','#OONIpSurgical')" runat="server"></asp:TextBox><span id="Span22" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIpSurgical" CssClass="TxtBox12 txtDataPopOON clearValueIpSur txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span23" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIpSurgical" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> <tr class="hidden toggle advanced"> <td> <span class="chkBoxcls"> <input id="chkboxIpMeternity" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1"> </span> </td> <td style="text-align:left"><span style="padding-left: 3%">IP Maternity</span> </td> <td> <asp:TextBox id="IINTier1IpMaternity" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMet clearValueIp" onInput="computeValue('#IINTier1IpMaternity','#IINTier2IpMaternity','#OONIpMaternity')" runat="server"></asp:TextBox><span id="Span24" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2IpMaternity" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMet clearValueIp" onInput="computeValue('#IINTier1IpMaternity','#IINTier2IpMaternity','#OONIpMaternity')" runat="server"></asp:TextBox><span id="Span25" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIpMaternity" CssClass="TxtBox12 txtDataPopOON clearValueIpMet txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span26" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIpMeternity" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> <tr class="hidden toggle advanced"> <td> <span class="chkBoxcls"> <input id="chkboxIpMHSA" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1"> </span> </td> <td style="text-align:left"><span style="padding-left: 3%">IP MHSA</span></td> <td> <asp:TextBox id="IINTier1IpMHSA" CssClass="TxtBox12 txtDataPopTier1 clearValueIpMhsa clearValueIp" onInput="computeValue('#IINTier1IpMHSA','#IINTier2IpMHSA','#OONIpMHSA')" runat="server"></asp:TextBox><span id="Span27" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2IpMHSA" CssClass="TxtBox12 txtDataPopTier2 clearValueIpMhsa clearValueIp" onInput="computeValue('#IINTier1IpMHSA','#IINTier2IpMHSA','#OONIpMHSA')" runat="server"></asp:TextBox><span id="Span28" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIpMHSA" CssClass="TxtBox12 txtDataPopOON clearValueIpMhsa txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span29" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIpMHSA" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> <tr class="hidden toggle advanced"> <td> <span class="chkBoxcls"> <input id="chkboxIpNICU" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1"> </span> </td> <td style="text-align:left"><span style="padding-left: 3%">IP NICU</span> </td> <td> <asp:TextBox id="IINTier1IpNICU" CssClass="TxtBox12 txtDataPopTier1 clearValueIpNicu clearValueIp" onInput="computeValue('#IINTier1IpNICU','#IINTier2IpNICU','#OONIpNICU')" runat="server"></asp:TextBox><span id="Span30" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="IINTier2IpNICU" CssClass="TxtBox12 txtDataPopTier2 clearValueIpNicu clearValueIp" onInput="computeValue('#IINTier1IpNICU','#IINTier2IpNICU','#OONIpNICU')" runat="server"></asp:TextBox><span id="Span31" runat="server" class="pers">%</span> </td> <td> <asp:TextBox ID="OONIpNICU" CssClass="TxtBox12 txtDataPopOON clearValueIpNicu txtIpOon clearValueIp" runat="server"></asp:TextBox><span id="Span32" runat="server" class="pers">%</span> </td> <td> <span class="chkBoxcls"> <input id="chkNotCoveredIpNICU" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" class="chkNotCovIp"> </span> </td> </tr> </table>

Развернуть фрагмент

Комментарии:

1. Это ничего не отключает. Это просто делает так, что вы не можете использовать мышь, чтобы что-то сделать. Вы все равно можете использовать свою клавиатуру (например, я не могу нажать на флажок, но я могу перейти к нему и проверить его таким образом). Кроме того, отключенные поля формы не отправляются с сообщением формы, поэтому потребуется дополнительная серверная обработка, чтобы проверить, следует ли обрабатывать поля.

Ответ №2:

С помощью var $row = $(this).closest(«tr») можно легко решить эту проблему.

//select all checkboxes $("#chkNotCoveredIp").change(function () { //"select all" change $(".chkNotCovIp").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status $(".clearValueIp").prop("disabled", false); $(".clearValueIp").val(''); }); //".checkbox" change $('.chkNotCovIp').change(function (e) { //uncheck "select all", if one of the listed checkbox item is unchecked if (!$(this).prop("checked")) { //if this item is unchecked var $row = $(this).closest("tr"); // Find the row $row.find(".clearValueIp").prop("disabled", false); } else { var $row = $(this).closest("tr"); // Find the row $row.find(".clearValueIp").prop("disabled", true); $row.find(".clearValueIp").val(''); } //check "select all" if all checkbox items are checked if ($('.chkNotCovIp:checked').length == $('.chkNotCovIp').length) { $("#chkNotCoveredIp").prop('checked', true); $(".clearValueIp").prop("disabled", true); $(".clearValueIp").val(''); } });

Вопрос:

Комментарии:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

почему node.js имя события не работает в соединении mongodb

Вход камеры GLFW C

Настройка Apache поверх GF3 — не работает