如果选中复选框，则禁用输入

Question

我有购票表格。 您必须在此处填写所有的坡口信息。 也可以购买没有任何名称的空票。 它只需要单击复选框，这将禁用所有输入字段。 var inputDisabled = 0;

    $("#three").change(function(){

       if(inputsDisabled == 0){

           $("input[name=fname]").attr("disabled", true);
           $("input[name=lname]").attr("disabled", true);
           $("input[name=email]").attr("disabled", true);
           $("input[name=sponsor]").attr("disabled", true);
           $("input[name=phone]").attr("disabled", true);

           inputsDisabled = 1;
       }
       else{

           $("input[name=fname]").attr("disabled", false);
           $("input[name=lname]").attr("disabled", false);
           $("input[name=email]").attr("disabled", false);
           $("input[name=sponsor]").attr("disabled", false);
           $("input[name=phone]").attr("disabled", false);

           inputsDisabled = 0;
       }
    });

当某人购买一张空票并按下“后退”浏览器按钮时，他将返回此表单。 提到的复选框仍会自动选中，但不再禁用这些字段。 我尝试使用下面的代码，但没有帮助。

if ("#three".checked) {
            $("input[name=fname]").attr("disabled", true);
            $("input[name=lname]").attr("disabled", true);
            $("input[name=email]").attr("disabled", true);
            $("input[name=sponsor]").attr("disabled", true);
            $("input[name=phone]").attr("disabled", true);
        }

有什么更好的方法吗？

Answer 1

您应该使用.prop("checked") .is(":checked")或.prop("checked")并且由于checked是属性，因此请使用prop()而不是attr()

$("input[name=fname], input[name=lname], input[name=email], input[name=sponsor], input[name=phone]")
     .prop("disabled", $("#three").is(":checked"));

Answer 2

我认为你的情况应该是这样

if($("#three").is(":checked"))
{
  $("input[name=fname]").attr("disabled", true);
  $("input[name=lname]").attr("disabled", true);
  $("input[name=email]").attr("disabled", true);
  $("input[name=sponsor]").attr("disabled", true);
  $("input[name=phone]").attr("disabled", true);
}

Answer 3

$("input[name=fname]").attr("disabled", $("#three").is(":checked"));
$("input[name=lname]").attr("disabled", $("#three").is(":checked"));
$("input[name=email]").attr("disabled", $("#three").is(":checked"));
$("input[name=sponsor]").attr("disabled", $("#three").is(":checked"));
$("input[name=phone]").attr("disabled", $("#three").is(":checked"));

Answer 4

这是我的愿景：

这里的键是$（'document'）。ready应该可以通过单击后退按钮来解决问题

var checkbox = $("#three");

checkbox.change(checkState);
$('document').ready(checkState);

function checkState() {
    var inputsDisabled = checkbox.is(":checked");
    $("input[name=fname]").prop("disabled", inputsDisabled);
    $("input[name=lname]").prop("disabled", inputsDisabled);
    $("input[name=email]").prop("disabled", inputsDisabled);
    $("input[name=sponsor]").prop("disabled", inputsDisabled);
    $("input[name=phone]").prop("disabled", inputsDisabled);
}