Question

我有一个默认启用的复选框。

这里的问题是，一旦我取消选中它，即使我再次选中它，它仍然保持禁用状态。

<input type="checkbox" class="show-check" checked value="1" id="DisplayOnClick">

document.getElementById("DisplayOnClick").onclick = function(){
        if(document.getElementById("DisplayOnClick").checked){
            document.getElementById("myFieldset").style.display = "block";

        } else {       
            document.getElementById("myFieldset").disabled = !this.checked;          
        }
    }

也尝试了以下代码，但这没有任何作用。

$(function () {

        $("#DisplayOnClick").click(function () {
            if ($(this).is("checked")){
                $("#myFieldset").show();
            }else {
                $("#myFieldset").hide();
            }
        });
    });

我不确定我在做什么错。任何帮助表示赞赏。谢谢。

Answer 1

$(function () {

$("#DisplayOnClick").change(function () {
    if ($(this).is(":checked")){
            $("#myFieldset").removeAttr('disabled')
        }else {
            $("#myFieldset").attr('disabled', 'true')   
        }
    });
});

这应该做您想要的。

此复选框的选择器必须为:checked

我似乎也遇到了字段集，即使您设置了disabled=false，它仍然被禁用。无关紧要的价值是什么，只有它存在。

Answer 2

只需执行以下操作即可。

document.getElementById("DisplayOnClick").onclick = function(){
 document.getElementById("myFieldset").disabled = !this.checked;
}

Answer 3

查看是否选中，然后显示字段集，否则隐藏。

$('#DisplayOnClick').click((e) => $('#myfieldset')[$(e.target).is(':checked') ? 'show' : 'hide']());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="show-check" checked value="1" id="DisplayOnClick">
<div id="myfieldset">
  hello from my field set
</div>

启用/禁用复选框上的文本框

3 个答案: