CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
divHelper11
divHelper11

Reputation: 2208

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;

    $("#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?

Upvotes: 0

Views: 360

Answers (4)

Satpal
Satpal

Reputation: 133403

You should use either .is(":checked") or .prop("checked") and since checked is a property use prop() instead of attr()

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

Upvotes: 4

Vladimir Gordienko
Vladimir Gordienko

Reputation: 3470

Here is my vision of this:

The key here is $('document').ready it should fix problem with back button clicked

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

Upvotes: 1

Ahmet Cetin
Ahmet Cetin

Reputation: 3823

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

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

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

Upvotes: 2

Related Questions