简体   繁体   English

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

[英]Disable inputs if checkbox is checked

I have a ticket purchase form. 我有购票表格。 You have to fill all the peronal information there. 您必须在此处填写所有的坡口信息。 It is also possible to buy a empty ticket, without any name on it. 也可以购买没有任何名称的空票。 It just requires clicking on the checkbox, which makes all the input fields disabled. 它只需要单击复选框,这将禁用所有输入字段。 var inputsDisabled = 0; 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;
       }
    });

When someone buys an empty ticket and presses a "back" browser button, he gets back to this form. 当某人购买一张空票并按下“后退”浏览器按钮时,他将返回此表单。 The mentioned checkbox is still checked automatically but the fields are not disabled anymore. 提到的复选框仍会自动选中,但不再禁用这些字段。 I tried to use the code below but it doesnt help. 我尝试使用下面的代码,但没有帮助。

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

Is there any better way to do this? 有什么更好的方法吗?

You should use either .is(":checked") or .prop("checked") and since checked is a property use prop() instead of attr() 您应该使用.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"));

I think your if condition should be like this 我认为你的情况应该是这样

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);
}
$("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"));

Here is my vision of this: 这是我的愿景:

The key here is $('document').ready it should fix problem with back button clicked 这里的键是$('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);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM