如果选中复选框，则需要 select 或文本区域

Question

我有一个包含多行的 table。每行都有一个复选框、select 和文本区域。如果勾选了任何复选框，则必须在 select 中选择一个选项，或者必须在文本区域中输入数据。

<table>
  <tr>
    <td scope="row">
      <input type="checkbox" id=" chk37179" name=" chk37179">
    </td>
    <td>B45648</td>
    <td>
      <select class="form-control reasoncmb" data-id="37179" id="cmb37179" name="cmb37179">
        <option value="">-- Select Reason --</option>
        <option value="365">Customer Changed their mind</option>
        <option value="459">Electrical Fault</option>
        <option value="458">Mechcanical Fault</option>
        <option value="457">Ordered Wrongly</option>
        <option value="363">Part Damaged In Transit</option>
        <option value="362">Part Faulty</option>
        <option value="364">Sent in Error</option>
        <option value="375">Stock Error</option>
        <option value="460">Wrong Side</option>
      </select>
      <textarea id="OtherText_37179" name="OtherText_37179" rows="2" cols="20"></textarea>
    </td>
  </tr>
  <tr>
    <td scope="row">
      <input type="checkbox" id=" chk379" name=" chk379">
    </td>
    <td>B45458</td>
    <td>
      <select class="form-control reasoncmb" data-id="379" id="cmb379" name="cmb379">
        <option value="">-- Select Reason --</option>
        <option value="365">Customer Changed their mind</option>
        <option value="459">Electrical Fault</option>
        <option value="458">Mechcanical Fault</option>
        <option value="457">Ordered Wrongly</option>
        <option value="363">Part Damaged In Transit</option>
        <option value="362">Part Faulty</option>
        <option value="364">Sent in Error</option>
        <option value="375">Stock Error</option>
        <option value="460">Wrong Side</option>
      </select>
      <textarea id="OtherText_379" name="OtherText_379" rows="2" cols="20"></textarea>
    </td>
  </tr>
  <tr>
    <td scope="row">
      <input type="checkbox" id=" chk179" name=" chk37179">
    </td>
    <td>B45648</td>
    <td>
      <select class="form-control reasoncmb" data-id="179" id="cmb179" name="cmb179">
        <option value="">-- Select Reason --</option>
        <option value="365">Customer Changed their mind</option>
        <option value="459">Electrical Fault</option>
        <option value="458">Mechcanical Fault</option>
        <option value="457">Ordered Wrongly</option>
        <option value="363">Part Damaged In Transit</option>
        <option value="362">Part Faulty</option>
        <option value="364">Sent in Error</option>
        <option value="375">Stock Error</option>
        <option value="460">Wrong Side</option>
      </select>
      <textarea id="OtherText_179" name="OtherText_179" rows="2" cols="20"></textarea>
    </td>
  </tr>
</table>

到目前为止，我使用的Jquery如下，它只是确保他们在继续之前至少select勾选了一个复选框。

但如果他们勾选了一个匹配的 select 框或文本框，则希望它有一个值：

            $('#prevbut').click(function () {
            checked = $("input[type=checkbox]:checked").length;
            if (!checked) {
                alert("You must select at least one product to");
                return false;
            }
        });

Answer 1

您将不得不遍历每个复选框并查看 select 和与之对应的文本区域。最简单的方法是将数据属性添加到每个 select 和 textarea 和 select 它。

$('#prevbut').click(function() {
  var needsSelection = $("input[type=checkbox]:checked").filter(function(){
    var dataId = $(this).data('id');
    return !($('select[data-id="'+ dataId +'"]').val() || $('textarea[data-id="'+ dataId +'"]').val());
  }).length;
  if (needsSelection) {
    alert("You must select at least one product to");
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td scope="row">
      <input type="checkbox" id="chk37179" name="chk37179" data-id="37179">
    </td>
    <td>B45648</td>
    <td>
      <select class="form-control reasoncmb" data-id="37179" id="cmb37179" name="cmb37179">
        <option value="">-- Select Reason --</option>
        <option value="365">Customer Changed their mind</option>
        <option value="459">Electrical Fault</option>
        <option value="458">Mechcanical Fault</option>
        <option value="457">Ordered Wrongly</option>
        <option value="363">Part Damaged In Transit</option>
        <option value="362">Part Faulty</option>
        <option value="364">Sent in Error</option>
        <option value="375">Stock Error</option>
        <option value="460">Wrong Side</option>
      </select>
      <textarea id="OtherText_37179" name="OtherText_37179" rows="2" cols="20" data-id="37179"></textarea>
    </td>
  </tr>
<tr>
    <td scope="row">
      <input type="checkbox" id=" chk179" name=" chk37179" data-id="179">
    </td>
    <td>B45648</td>
    <td>
      <select class="form-control reasoncmb" data-id="179" id="cmb179" name="cmb179">
        <option value="">-- Select Reason --</option>
        <option value="365">Customer Changed their mind</option>
        <option value="459">Electrical Fault</option>
        <option value="458">Mechcanical Fault</option>
        <option value="457">Ordered Wrongly</option>
        <option value="363">Part Damaged In Transit</option>
        <option value="362">Part Faulty</option>
        <option value="364">Sent in Error</option>
        <option value="375">Stock Error</option>
        <option value="460">Wrong Side</option>
      </select>
      <textarea id="OtherText_179" name="OtherText_179" rows="2" cols="20" data-id="179"></textarea>
    </td>
  </tr>  
</table>

<button id="prevbut">TEST</button>

如果选中复选框，则需要 select 或文本区域

Make select or textarea required if checkbox is checked

javascript

validation

jquery