Question

我已经工作了两天，以获得有关无线电按钮和复选框工作的代码。但是仍然没有运气。

提供一些上下文：根据通过单选按钮做出的选择，有一个允许的最大复选框来检查。例如，如果我从单选按钮中选择“一个”，我只能选择一个复选框。

所以人们得到的选择是'无'，'一'和'两'。如果人们选择无，则复选框保持隐藏状态（这样可行）。如果选择“一个”或“两个”，则会出现复选框（这也有效）。

当我选择“两个”时，我可以选择两个复选框，然后当我选择“一个”时，我只能选择一个复选框。然而问题是当我从一个切换到两个时，我总是可以选择一个。

HTML如下：

<tr>
  <td class="label">
    <label for="splits">Split(s)</label>
  </td>
  <td class="value">
    <div id="picker_splits" class="radio-select select   swatch-control">
      <select id="splits" class="" name="attribute_splits" data-attribute_name="attribute_splits">
        <option value="">Een optie kiezen</option>
        <option value="Geen">Geen</option>
        <option value="Eén">Eén</option>
        <option value="Twee">Twee</option>
      </select>
      <ul id="radio_select_splits57ac19f756a99" class="" data-attribute_name="attribute_splits">
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Geen" type="radio" data-value="Geen" value="Geen" />
          <label for="radio_splits57ac19f756a99_Geen">Geen</label>
        </li>
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Eén" type="radio" data-value="Eén" value="Eén" />
          <label for="radio_splits57ac19f756a99_Eén">Eén</label>
        </li>
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Twee" type="radio" data-value="Twee" value="Twee" />
          <label for="radio_splits57ac19f756a99_Twee">Twee</label>
        </li>
      </ul>
    </div><a class="reset_variations" href="#">Wissen</a>   
  </td>
</tr>
</tbody>
</table>

<div class="wccpf-fields-group-1">

  <table class="wccpf_fields_table " cellspacing="0">
    <tbody>
      <tr>
        <td class="wccpf_label">
          <label for="plaatsing_splits">Plaatsing split(s)</label>
        </td>
        <td class="wccpf_value">
          <ul class="wccpf-field-layout-horizontal">
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="linkerzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Linkerzijde</label>
            </li>
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="rechterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Rechterzijde</label>
            </li>
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="achterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Achterzijde</label>
            </li>

          </ul>
          <span class="wccpf-validation-message wccpf-is-valid-1">Wanneer je gekozen hebt voor een spit, mag dit veld niet leeg blijven</span>
        </td>
      </tr>

这是剧本：

jQuery(document).ready(function($) {
  $("#picker_splits").change(function() {
    var kiesJeExtras = $("#picker_splits option:selected").val();
    var verborgenKeuze = $(".wccpf-fields-group-1");
    if (kiesJeExtras == "Eén") {
      verborgenKeuze.show('slow');
      $('input[type=checkbox]').on('change', function(e) {
        if ($('input[type=checkbox]:checked').length > 1) {
          $(this).prop('checked', false);
          alert("allowed only 1");
        }
      });
    } else if (kiesJeExtras == "Twee") {
      verborgenKeuze.show('slow');
      $("#picker_splits[value=Eén]").removeProp("selected");
      $(".wccpf-field[value=linkerzijde]").prop("checked", false);
      $(".wccpf-field[value=rechterzijde]").prop("checked", false);
      $(".wccpf-field[value=achterzijde]").prop("checked", false);
      $('input[type=checkbox]').on('change', function(e) {
        if ($('input[type=checkbox]:checked').length > 2) {
          $(this).prop('checked', false);
          alert("allowed only 2");
        }
      });
    } else {
      verborgenKeuze.hide('slow');
      $(".wccpf-field[value=linkerzijde]").prop("checked", false);
      $(".wccpf-field[value=rechterzijde]").prop("checked", false);
      $(".wccpf-field[value=achterzijde]").prop("checked", false);
      $('.wccpf-field[name=split_lengte]').val("0");
    }
  });
});

我希望有人可以帮助我，因为我已经被困了两天了。无法弄清问题是什么。

Answer 1

看一下这个片段。我添加了一个设置允许复选框数量的数据属性，而不是if-cases。

首先，我们从data-value="x"获得允许的数量。然后我们检查是否允许更多。

请注意，我还没有在下拉列表中实现它。

＆＃13;

$('.wccpf-field-layout-horizontal input').change(function(){
  var noOfSelected = $('.wccpf-field-layout-horizontal input:checked').length;
  // Get the allowed number based on the checked radio.
  var noOfAllowed = $('#picker_splits input:checked').data('value');
  if(noOfSelected > noOfAllowed){
      alert('You have not checked ' + noOfSelected + '. You are only allowed to check ' + noOfAllowed);
      $(this).prop('checked', false);
  }
});

$('#picker_splits input').change(function(){
    if($(this).data('value') == 0)
    {
      // Uncheck all.
      $('.wccpf-field-layout-horizontal input:checked').prop('checked',false);
      
      // Possibly hide?
      //$('.wccpf-field-layout-horizontal input:checked').hide();
    }  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
  <td class="label">
    <label for="splits">Split(s)</label>
  </td>
  <td class="value">
    <div id="picker_splits" class="radio-select select   swatch-control">
      <select id="splits" class="" name="attribute_splits" data-attribute_name="attribute_splits">
        <option value="">Een optie kiezen</option>
        <option value="Geen">Geen</option>
        <option value="Eén">Eén</option>
        <option value="Twee">Twee</option>
      </select>
      <ul id="radio_select_splits57ac19f756a99" class="" data-attribute_name="attribute_splits">
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Geen" type="radio" data-value="0" value="Geen" />
          <label for="radio_splits57ac19f756a99_Geen">Geen</label>
        </li>
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Eén" type="radio" data-value="1" value="Eén" />
          <label for="radio_splits57ac19f756a99_Eén">Eén</label>
        </li>
        <li>
          <input class="radio-option" name="attribute_splits_57ac19f756a3b" id="radio_splits57ac19f756a99_Twee" type="radio" data-value="2" value="Twee" />
          <label for="radio_splits57ac19f756a99_Twee">Twee</label>
        </li>
      </ul>
    </div><a class="reset_variations" href="#">Wissen</a>   
  </td>
</tr>
</tbody>
</table>

<div class="wccpf-fields-group-1">

  <table class="wccpf_fields_table " cellspacing="0">
    <tbody>
      <tr>
        <td class="wccpf_label">
          <label for="plaatsing_splits">Plaatsing split(s)</label>
        </td>
        <td class="wccpf_value">
          <ul class="wccpf-field-layout-horizontal">
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="linkerzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Linkerzijde</label>
            </li>
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="rechterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Rechterzijde</label>
            </li>
            <li>
              <label>
                <input type="checkbox" class="wccpf-field" name="plaatsing_splits[]" value="achterzijde" wccpf-type="checkbox" wccpf-pattern="mandatory" wccpf-mandatory="no" />Achterzijde</label>
            </li>

          </ul>
          <span class="wccpf-validation-message wccpf-is-valid-1">Wanneer je gekozen hebt voor een spit, mag dit veld niet leeg blijven</span>
        </td>
      </tr>
</table>

＆＃13;

Answer 2

将$("#picker_splits")更改为$("#splits")。

$("#splits").change(function() {
   var kiesJeExtras = $("#splits option:selected").val();
   ...

Radiobuttons和复选框不适用于jquery中的if / else

2 个答案: