Снимите флажок в java-скрипте

У меня есть несколько флажков с максимальным количеством возможностей для проверки 4. Если максимальное количество достигнуто, флажки не установлены. Что я хочу знать, так это то, что если я сниму отметку с одного из отмеченных флажков, ограничение на 4 уменьшится, а отключенные флажки будут включены. Есть ли какие-либо события для флажков asp, которые я могу использовать для вызова функции сценария Java, которая будет делать то, о чем я прошу? Вот мой код флажков:

function ChkValidate() {
  var NewCount = 0

  if (document.getElementById("ChkDytLek").checked == true) {
    NewCount = NewCount + 1

    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')

      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
  
  if (document.getElementById("ChkDytLek").checked == false) {
    NewCount = NewCount - 1
    alert(NewCount)
  }

  if (document.getElementById("ChkDytUSD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
  
  if (document.getElementById("ChkDytUSD").checked == false) {
    NewCount = NewCount - 1
    alert(NewCount)
  }

  if (document.getElementById("ChkDytEU").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytCAD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytCHF").checked == true) {
    NewCount = NewCount + 1

    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytAUD").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }

  if (document.getElementById("ChkDytGBP").checked == true) {
    NewCount = NewCount + 1
    if (NewCount == 4) {
      alert('Ju keni arritur maximumin e llogarive qe mund te zgjidhni!')
      if (document.getElementById("ChkDytLek").checked == false) {
        document.getElementById("ChkDytLek").disabled = true;
      }
      if (document.getElementById("ChkDytUSD").checked == false) {
        document.getElementById("ChkDytUSD").disabled = true;
      }
      if (document.getElementById("ChkDytEU").checked == false) {
        document.getElementById("ChkDytEU").disabled = true;
      }
      if (document.getElementById("ChkDytCAD").checked == false) {
        document.getElementById("ChkDytCAD").disabled = true;
      }
      if (document.getElementById("ChkDytCHF").checked == false) {
        document.getElementById("ChkDytCHF").disabled = true;
      }
      if (document.getElementById("ChkDytAUD").checked == false) {
        document.getElementById("ChkDytAUD").disabled = true;
      }
      if (document.getElementById("ChkDytGBP").checked == false) {
        document.getElementById("ChkDytGBP").disabled = true;
      }
    }
  }
}
<tr>
  <td style="padding-left: 10px" width="200px" colspan="1" ><b><big>Karta e Debitit te lidhet edhe me llogarite dytesore ne:</big></b></td>
  <td style="padding-left: 10px" width="70px">
    <%-- <INPUT TYPE="checkbox" NAME="dog" id="ChkDytLek" onClick="return KeepCount()"> Dog--%>
    <asp:CheckBox ID="ChkDytLek" runat="server" class="llogariDyt"
        GroupName="Monedha" Text="Lek" CssClass="radioMarginLeft"  type="check"  onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp; 
    <img src="images/eagle-clipart-albanian-7.jpg" width="24px" height="15px"/>
  </td>
  <td>                  
    <asp:CheckBox ID="ChkDytCAD" runat="server"
        GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/CAD.png" width="24px" height="15px" />
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px">
    <asp:CheckBox ID="ChkDytEU" runat="server"
        GroupName="Monedha" Text="EUR" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/eu.png"width="24px" height="15px" />
  </td>
  <td>
    <%-- <INPUT name=ChkDytCHF type=checkbox value=Charity_profile onclick="return itemClicked(3)"> CHF--%>
    <asp:CheckBox ID="ChkDytCHF" runat="server"
        GroupName="Monedha" Text="CHF" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/CHF.png" width="24px" height="15px" />
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px">
    <%-- <INPUT name=ChkDytUSD type=checkbox value=Charity_profile onclick="return itemClicked(4)"> USD--%>
      <asp:CheckBox ID="ChkDytUSD" runat="server"
          GroupName="Monedha" Text="USD" CssClass="radioMarginLeft" onClick="ChkValidate()"  ClientIDMode="Static" />&nbsp;&nbsp;
      <img src="images/usa.png" width="24px" height="15px"/>
  </td>
  <td>
    <%-- <INPUT name=ChkDytAUD type=checkbox value=Charity_profile onclick="return itemClicked(5)"> AUD--%>
    <asp:CheckBox ID="ChkDytAUD" runat="server"
        GroupName="Monedha" Text="AUD" CssClass="radioMarginLeft"  onClick="ChkValidate()"  ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/AUD.png" width="24px" height="15px"/>
  </td>
</tr>
<tr>
  <td> </td>
  <td style="padding-left: 10px;">
    <%-- <INPUT name=ChkDytGBP type=checkbox value=Charity_profile onclick="return itemClicked(6)"> GBP--%>
    <asp:CheckBox ID="ChkDytGBP" runat="server"
        GroupName="Monedha" Text="GBP" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />&nbsp;&nbsp;
    <img src="images/GBP.png" width="24px" height="15px"/>
  </td>
</tr>

вы можете предоставить скрипку или что-то в этом роде?

Muhammad Usman 11.04.2018 13:23

используйте событие "OnCheckedChanged" для <asp: checkbox>, например <asp: CheckBox ID = "chkSelect" runat = "server" OnCheckedChanged = "ChckedChanged" />

Arjit 11.04.2018 13:25

OnCheckedChanged - это событие на стороне сервера, в этом случае требуется событие на стороне клиента.

Lara 11.04.2018 13:26

Почему вы не создаете повторно используемую функцию с отметкой / отключением и не передаете ей элемент?

Mr. Polywhirl 11.04.2018 13:35

@Мистер. Poliwhirl, я не думал об этом, можете ли вы привести пример, чтобы я мог лучше понять?

Lara 11.04.2018 13:38

Здесь я немного нормализовал вашу логику ... pastebin.com/8Z6g2bFC См. «Третью форму» внизу.

Mr. Polywhirl 11.04.2018 13:52

@Мистер. Поливирл сто раз спасибо :)))

Lara 11.04.2018 14:07

@Мистер. Polywhirl На самом деле, при более подробном тестировании выяснилось, что, поскольку код проверяет все if-ы один за другим, если, например, первый флажок не установлен, NewCount меняет значение от 0 до -1 и т. Д., Но это создает проблемы с сосчитайте до 4

Lara 11.04.2018 14:32
1
8
67
2

Ответы 2

Итак, если я правильно понимаю ваш вопрос, вы хотите, чтобы было установлено максимум 4 флажка, а затем другие флажки должны быть отключены. Это должно помочь.

let amountChecked = 0;

function change(checkbox) {
  if (checkbox.checked) {
    amountChecked++;
  } else {
    amountChecked--;
  }

  let checkboxes = document.getElementsByClassName('check');


  if (amountChecked >= 4) {

    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        continue;
      } else {
        checkboxes[i].disabled = true;
      }
    }
  }

  if (amountChecked < 4) {
    for (let i = 0; i < checkboxes.length; i++) {
      checkboxes[i].disabled = false;
    }
  }


}
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">
<input class="check" type="checkbox" onchange="change(this)">

Чтобы вы могли извлечь из этого максимальную пользу, я бы действительно попытался понять код. Таким образом, вы можете реализовать свои собственные функции, адаптированные к вашим потребностям.

использование этого <input class = "check" type = "checkbox" onchange = "change (this)"> напрямую вредит другой части моего кода, поэтому я хотел бы продолжить с тем же объявлением asp

Lara 11.04.2018 14:40

Вы можете создать плагин jQuery, чтобы определить, следует ли отключать или включать флажки на основе текущего количества флажков.

(function($) {
  $.fn.checkGroup = function(maxCheck) {
    return this.data('max-check', maxCheck).on('change', 'input[type="checkbox"]', function(e) {
      var $group = this != null ? $(this).parent().parent() : $(e.delegateTarget);
      $group.find('input[type="checkbox"]').each(function(index, child) {
        if ($group.find('input[type="checkbox"]:checked').length >= $group.data('max-check')) {
          if ($(child).prop('checked') !== true) $(child).prop('disabled', true);
        } else {
          if ($(child).prop('disabled')) $(child).prop('disabled', false);
        }
      });
    });
  };
})(jQuery);

//$('.check-group').checkGroup(4);       // <- BOTH  4 for each ?
                                         // <- ====  ==================
$('.check-group.group-a').checkGroup(2); // <- OR    2 only for group A
$('.check-group.group-b').checkGroup(3); // <- AND   3 only for group B
.check-group {
  margin-top: 1em;
  border: thin solid lightgrey;
  width: 15em;
  padding: 0.5em;
}
.check-group label {
   margin-right: 0.50em;
   font-family: monospace;
   font-size: 1.25em;
}
.check-group input {
   margin-left: 0.25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check-group group-a">
  <label><input type="checkbox">A</label>
  <label><input type="checkbox">B</label>
  <label><input type="checkbox">C</label>
  <label><input type="checkbox">D</label>
  <label><input type="checkbox">E</label>
  <label><input type="checkbox">F</label>
</div>
<div class="check-group group-b">
  <label><input type="checkbox">G</label>
  <label><input type="checkbox">H</label>
  <label><input type="checkbox">I</label>
  <label><input type="checkbox">J</label>
  <label><input type="checkbox">K</label>
  <label><input type="checkbox">L</label>
</div>

Другие вопросы по теме