Make select or textarea required if checkbox is checked-CodePudding

I have a table with multiple rows. In each row is a check box, select and textarea. If any checkbox is ticked then an option must be chosen in the select or data must be entered in the textarea.

<table>
  <tr>
    <td scope="row">
      <input type="checkbox" id=" chk37179" name=" chk37179">
    </td>
    <td>B45648</td>
    <td>
      <select  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  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  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>

So far the Jquery I have used is as follows, it simply makes sure that they have at least selected a checkbox before they move on.

But want it that if they have ticked one the matching select box or text box has a value in it:

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

CodePudding user response：

You are going to have to loop over each checkbox and look at the select and textarea that corresponds with it. Easiest thing is to add the data attribute to each select and textarea and select it.

$('#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  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  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>