如果選中復選框，則禁用輸入

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);
}