如何通过复选框选择jquery来切换元素属性?

0tdrvxhp  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(108)

我需要通过复选框选择来切换按钮中的“禁用”属性?请帮

$(document).ready(function() {
  $("#checkbox").click(function() {
    $(".btn-submit").attr("checked");
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox" id="checkbox">
<button class="btn-submit" disabled>Submit</button>
wbrvyc0a

wbrvyc0a1#

你需要使用类似下面的东西:

$("#checkbox").click(function() {
    if ($('#checkbox').prop("checked") == true) {
        $('.btn-submit').prop("disabled", false);
    } else {
        $('.btn-submit').prop("disabled", true);
    }
});

第2行将检查该框是否被选中。如果是,它会将提交按钮的disabled属性设置为false。如果未选中此选项,它将反转操作并再次禁用该按钮。
当启用遵循一组步骤的按钮时,总是问自己,最终用户是否有任何方法可以解决这个问题(在这种情况下,试图取消选中该框)
希望这能帮助你

qlzsbp2j

qlzsbp2j2#

您可以使用this.checked来确定正在更改的复选框是否被选中。
然后您可以使用.prop("disabled", disabled_true_false)禁用该按钮。
更新了代码片段,以便仅在勾选复选框后启用按钮:

$("#checkbox").change(function() {
  $(".btn-submit").prop("disabled", !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox" id="checkbox">
<button class="btn-submit" disabled>Submit</button>
jljoyd4f

jljoyd4f3#

更改代码以实现所需的功能

$(document).ready(function() {
  $("#checkbox").change(function() {
    $(".btn-submit").prop("disabled", !this.checked);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox" id="checkbox">
<button class="btn-submit" disabled=true>Submit</button>

相关问题