How can I disable all my raw fields in pageload?

Question

When my page is loaded, I want all my unverified fields to be disabled:

<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

I tried it with this code, but it does not work:

  $(document).ready(function(){
        if($(".test").is(':checked'))
            $(".test").attr("disabled", false);
        else
            $(".test").attr("disabled", true);
    });

https://jsfiddle.net/m7ny2Le7/1/

Answer 1

You can use to filter unchecked checkboxes. :not(:checked)

$(document).ready(function() {
  $(":checkbox:not(:checked)").prop('disabled', true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked>I have a car
  <br>
  <input type="submit" value="Submit">
</form>

Run code

Also you can use with callback prop()

$(document).ready(function() {
  $(":checkbox").prop('disabled', function() {
    return !this.checked;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked>I have a car
  <br>
  <input type="submit" value="Submit">
</form>

Run code

NOTE: I do not see the class in your code test, so I use to specify all the checkboxes. :checkbox

Answer 2

Fiddle

$(document).ready(function() {
    $("#form").find('.test').each(function() {
        if ($(this).is(':checked'))
            $(this).attr("disabled", false);
        else
            $(this).attr("disabled", true);
    });
}); 

Use .eachto go through all the checkboxes.

Answer 3

: not :

 $('input:checkbox:not(:checked)').prop('disabled', true);

Fiddle

Answer 4

.test is a class, so you want to iterate over elements using this class:

$(".test").each(function() {
  $(this).prop("disabled", $(this).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike" class="test">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked class="test">I have a car
  <br>
  <input type="submit" value="Submit">
</form>

Run code

Answer 5

Try it, it will work. You have to iterate

  $(document).ready(function(){
        $(".test").each(function(){

            if($(this).is(':checked')){

                $(this).attr("disabled", false);
            } else {
                $(this).attr("disabled", true);
            }
        }); 
    });

Answer 6

Here is a possible solution: https://jsfiddle.net/m7ny2Le7/4/

  $(document).ready(function(){
      $("input[name='vehicle']").attr("disabled", true);

        if($("input[name='vehicle']:checked").length > 0)
            $("input[name='vehicle']:checked").attr("disabled", false); 
    });