如果复选框被禁用，如何用图像代替复选框？

Question

The code is working fine but I want to replace those checkbox with image or icon which is disabled.代码工作正常，但我想用禁用的图像或图标替换这些复选框。 So, How can I do this?那么，我该怎么做呢？

 $(document).ready(function() { $('.list-dis input[type="checkbox"]').each(function() { if ($(this).closest('tr').index() !== 0) { $(this).prop('disabled', true); } }).on('change', function() { $(this).prop('disabled', true); $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="list-dis" id="sub1"> <tbody> <tr> <td> <input type="checkbox" class="test" id="1"> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="2"> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="3"> </td> </tr> </tbody> </table>

Answer 1

Like this?像这样？

 $(document).ready(function() { $('.list-dis input[type="checkbox"]').each(function() { if ($(this).closest('tr').index() !== 0) { $(this).prop('disabled', true).hide() $(this).next().show() } }).on('change', function() { $(this).prop('disabled', true) $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false).show() .next().hide() }); });

 .list-dis img { display:none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="list-dis" id="sub1"> <tbody> <tr> <td> <input type="checkbox" class="test" id="1"><img src="http://aux.iconspalace.com/uploads/1062253611720440079.png" width="20"/> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="2"><img src="http://aux.iconspalace.com/uploads/1062253611720440079.png" width="20"/> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="3"><img src="http://aux.iconspalace.com/uploads/1062253611720440079.png" width="20"/> </td> </tr> </tbody> </table>

Answer 2

Check out this snippet:看看这个片段：

 <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"></style> <script type="text/javascript"> $(document).ready(function() { $('.list-dis input[type="checkbox"]').each(function() { if ($(this).closest('tr').index() !== 0) { $(this).prop('disabled', true); } }).on('change', function() { $(this).prop('disabled', true); $(this).closest('tr').next('tr').find('input[type="checkbox"]').prop('disabled', false); $(this).prop('outerHTML', '<img src="" width="10px" height="10px"/>'); }); }); </script> </head> <body> <table class="list-dis" id="sub1"> <tbody> <tr> <td> <input type="checkbox" class="test" id="1"> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="2"> </td> </tr> <tr> <td> <input type="checkbox" class="test" id="3"> </td> </tr> </tbody> </table> </body> </html>

You can change attribute values of <img> tag inside <script>您可以在<script>更改<img>标签的属性值

如果复选框被禁用，如何用图像代替复选框？

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-08-26 08:08:59

解决方案2
0 2020-08-26 08:20:39

如果复选框被禁用，如何用图像代替复选框？

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-08-26 08:08:59

解决方案2 0 2020-08-26 08:20:39

解决方案1
0 已采纳 2020-08-26 08:08:59

解决方案2
0 2020-08-26 08:20:39