Question

我有以下表格结构。如果用户支付了Ist分期付款的费用，则复选框将被禁用。现在我想要jquery验证来限制用户点击支付IIIrd分期付款而不支付第二期分期付款。但是用户可以一次单独支付IInd分期付款。它的基本优先权取决于。

＆＃13;

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$('tr input:checkbox').click(function(e) {
  
  var table = $(e.target).closest('table');
  $('td input:checkbox', table).attr('checked', e.target.checked);

});

</script>

＆＃13;

<html>
<button id="submitButton" type="submit" class="btn btn-secondary">Cick To Pay</button>
<table>
    <tr>
    <td class="checkbox-column">
    <input type="checkbox" name="invoices[]" id="tr_14640" class="icheck-input"/>
    </td> 
    <td>IIInd Instalment</td>
    <td><button type="button" class="btn btn-primary">UnPaid</button></td>
    </tr>

    <tr>
    <td class="checkbox-column">
    <input type="checkbox" name="invoices[]" id="tr_14640" class="icheck-input"/>
    </td>
    <td>IInd Instalment</td>
    <td><button type="button" class="btn btn-primary">UnPaid</button></td>
    </tr>
                    
    <tr>
    <td class="checkbox-column">  
    <input type="checkbox" name="invoices[]" class="icheck-input" disabled />
    </td>
    <td>Ist Instalment</td>
    <td><button type="button" class="btn btn-success">Paid</button>
    </td>
    </tr>
   </table>

</html>

＆＃13;

感谢。

Answer 1

这样的东西？

$('tr input:checkbox').click(function(e) {
  
  var tr = $(e.currentTarget).closest('tr');
  
  if($(tr).next().find('td.checkbox-column').find('input[type="checkbox"]').prop("checked") &&
    $(tr).next().find('button.btn-success').length > 0){
    $('td input:checkbox', tr).attr('checked', e.currentTarget.checked);
  }else{
    alert("Please pay the " + $(tr).next().find('td.checkbox-column').next().text().trim() + " first.");
    $(this).attr('checked', false);
  }
  
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button id="submitButton" type="submit" class="btn btn-secondary">Cick To Pay</button>
<table>
    <tr>
    <td class="checkbox-column">
    <input type="checkbox" name="invoices[]" id="tr_14640" class="icheck-input"/>
    </td> 
    <td>IIInd Instalment</td>
    <td><button type="button" class="btn btn-primary">UnPaid</button></td>
    </tr>

    <tr>
    <td class="checkbox-column">
    <input type="checkbox" name="invoices[]" id="tr_14640" class="icheck-input"/>
    </td>
    <td>IInd Instalment</td>
    <td><button type="button" class="btn btn-primary">UnPaid</button></td>
    </tr>
                    
    <tr>
    <td class="checkbox-column">  
    <input type="checkbox" name="invoices[]" class="icheck-input" disabled checked />
    </td>
    <td>Ist Instalment</td>
    <td><button type="button" class="btn btn-success">Paid</button>
    </td>
    </tr>
   </table>

</html>

Jquery在单击父行时检查子行优先级

1 个答案: