Question

我有一个表格，每行都有一个输入框和一个复选框。如果我选中了复选框，则输入框必须为必填项，或者将必需属性添加到该行输入框，否则将必需属性设置为false。这种情况适用于特定的行，因为每一行都有其输入框和复选框。

<table>
 <tr>
<td>S.no.</td>
<td>Required Capacity</td>
<td>Action</td>
 </tr>
 <tr>
<td>1</td>
<td><input type ="text"  id = "src2"/></td>//make this as reqd. ifchecked
<td><input type="checkbox" onclick="makerequired()"></td>
 </tr>
 <tr>
<td>2</td>
<td><input type ="text"  id = "src3"/></td> 
<td><input type = "checkbox" onclick="makerequired()"></td>
 </tr>
 <tr> 
<td>3</td>
<td><input type ="text"  id = "src3"/></td> 
<td><input type = "checkbox" onclick="makerequired()"></td>
 </tr>
</table>
</body>

<html>

 <script>
  function makerequired(){

 </script>

Answer 1

在点击事件上设置必需的属性。更改复选框后-将DOM树上移至父级tr，然后向下以获取文本输入，然后根据复选框的选中状态设置属性。

我已根据需要设置了文本输入之一，并设置了红色背景以证明结果。请注意，您实际上并不需要jQuery，可以直接使用javascript。

$('input[type="checkbox"]').change(function(){
  var checked = $(this).is(':checked');
  var input = $(this).closest('tr').find('input[type="text"]');
  input.prop('required', checked)
})

input:required {
  background-color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>S.no.</td>
    <td>Required Capacity</td>
    <td>Action</td>
   </tr>
   <tr>
    <td>1</td>
    <td><input type ="text"  id = "src2" required/></td>
    <td><input type="checkbox" checked /></td>
   </tr>
   <tr>
    <td>2</td>
    <td><input type ="text"  id = "src3"/></td> 
    <td><input type = "checkbox"></td>
   </tr>
   <tr> 
    <td>3</td>
    <td><input type ="text"  id = "src3"/></td> 
    <td><input type = "checkbox"></td>
   </tr>
</table>

如果选中复选框，如何将输入框设置为必填字段；如果未选中表中的特定行，则如何将输入框设为必填字段？

1 个答案: