组合框更改复选框启用

combobox change checkbox enable

本文关键字:复选框 启用 组合      更新时间:2023-09-26

我的javascript有问题。当我更改组合框时,所有复选框都启用。我不希望这样。我只希望每个复选框启用而不是全部复选框。这是我的js代码:

<script>
  function activ(){
     $("input[type='checkbox']").removeAttr("disabled");
  }
</script>
<script>
  function disable(){
     $("input[type='checkbox']").attr("disabled", "disabled");
  }
</script>

这是我的HTML代码:

<html>
   <body onload="disable();">
      <table>
         <tr>
            <th>SELECT</th>
            <th>TAKE</th>
         </tr>
         <tr>
            <td>
                 <select onchange="activ();">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" name="check1" /></td>
         </tr>
            <tr>
            <td>
                 <select onchange="activ();">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" name="check1" /></td>
          </tr>
            <tr>
            <td>
                 <select onchange="activ();">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" name="check1" /></td>
        </tr>
   </body>
</html>

我希望任何身体都能帮助我。我真的很感激任何帮助..谢谢

如果您希望复选框启用与特定选择相对应的内容,则必须具有唯一的 id 才能发挥作用。

<input type="checkbox" id="check1" />
<input type="checkbox" id="check2" />

整个代码:

    <!DOCTYPE html>
<html>
<head>
    <style>
        select{
  width: 100px;  
  display: block;
  margin: 10px;
}
        </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input[type='checkbox']").attr("disabled", "disabled");
 $('.test').change(function(){
  var tmp =   $(this).closest('tr').find("input[type='checkbox']").attr('id');
 $('#'+tmp+'').removeAttr("disabled");
  });
});
</script>
</head>
<body>
 <table>
         <tr>
            <th>SELECT</th>
            <th>TAKE</th>
         </tr>
         <tr>
            <td>
                 <select class="test">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" id="check1" /></td>
         </tr>
            <tr>
            <td>
                 <select class="test">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" id="check2" /></td>
          </tr>
            <tr>
            <td>
                 <select class="test">
                     <option>--Select--</option>
                     <option>Cars</option>
                     <option>Plane</option>
                     <option>Boat</option>
                 </select>
            </td>
            <td><input type="checkbox" id="check3" /></td>
        </tr>
        </table>
</body>
</html>

因此。
检查它是否满足您想要的。折叠器:启用特定复选框

现在,无论您的复选框具有什么动态 ID,它都会检查您的选择中的更改,并仅启用特定于它的组合框。