Set form field to non required if checkbox is checked

Design help Custom code
1

Hello everyone,

I am struggling to add the right code custom to answer to my problem.

I would like to change the “required” attribute to non required for 4 fields if the first checkbox is checked.

Do you have any idea ?

I tried this one but it is not working unfortunately.

<script>
Webflow.push(function() {
	$('boxcheck').click(function() {
		if($(this).prop('unchecked')) {
	  $('.field_conditioned').attr('required');
      }
})
</script>

Actually, I have this one but I don’t know why it doesn’t work (when the checkbox is checked, it becomes required and the invert)


<script>
  $(document).ready(function() {
    // Sélectionne la checkbox et les autres fields en utilisant les classes
    var checkbox = $('.checkbox-naissance');  // Remplace par la classe de ta checkbox
    var fields = $('.field_conditioned');  // Remplace par les classes de tes champs texte

    // Fonction pour vérifier l'état de la checkbox
    checkbox.change(function() {
      if (checkbox.is(':checked')) {
        // Si la checkbox est cochée, rendre les champs non obligatoires
        fields.each(function() {
          $(this).removeAttr('required');
        });
      } else {
        // Si la checkbox est décochée, rendre les champs obligatoires
        fields.each(function() {
          $(this).attr('required', 'required');
        });
      }
    });

    // Pour s'assurer que les champs sont correctement configurés au chargement de la page
    if (checkbox.is(':checked')) {
      fields.each(function() {
        $(this).removeAttr('required');
      });
    } else {
      fields.each(function() {
        $(this).attr('required', 'required');
      });
    }
  });
</script>

Thanks !

Here is the website : Formulaire d'inscription Seltz

2

hi @Camille_Di_vincenzo I do not understand why do you adding to all checkboxes required and after you would like to remove it. :man_shrugging:

You can reason about that as it is not common pattern used in production. Easier is to only check if any checkbox is checked on submit. If there is no checkbox checked you should reveal error message to notify user that at least one of options (checkbox) has to be chosen.

Here is a simple example I have just created for you to get an idea.

Another option can be to add functionality disabling submit button until is all fulfilled. It can slightly add complexity but … it is just an option :man_shrugging:

1 Like
3

Hello Stan,

Thanks for your answer.

I don’t want to change the attribute of the checkbox itself but of the following fields on the form like in the pictures below. However I need the invert. My goal is : when the checkbox is not checked, fields must be required ; when it is checked, fields must not be required :)

Do you know what is wrong with my code ? I am kind of desperate !

Here is the read only link : Webflow - Micro-crèche des Anges

CleanShot 2024-08-20 at 19.41.54
CleanShot 2024-08-20 at 19.41.541920×1080 96.3 KB

CleanShot 2024-08-20 at 19.41.08
CleanShot 2024-08-20 at 19.41.081920×1080 95.7 KB

4

hi @Camille_Di_vincenzo sorry for misunderstanding as I didn’t check code correctly. I saw some issues with your second part of function and I didn’t checked where function is invoked.

here is other version.

$(document).ready(function() {
    // Select the checkbox and other fields using their classes
    var checkbox = $('.checkbox-naissance');  // Ensure this class matches the checkbox element
    var fields = $('.field_conditioned');  // Ensure this class matches the fields that need to be conditioned

    // Function to toggle the 'required' attribute based on the checkbox state
    function toggleRequired() {
        if (checkbox.is(':checked')) {
            // If the checkbox is checked, remove the 'required' attribute from the fields
            fields.removeAttr('required');
        } else {
            // If the checkbox is unchecked, add the 'required' attribute to the fields
            fields.attr('required', 'required');
        }
    }

    // Attach the toggle function to the checkbox change event
    checkbox.change(function() {
        toggleRequired();
    });

    // Ensure fields are correctly configured on page load
    toggleRequired();
});

I have to say that Im not familiar with jQuery so I let GPT generate this function based on my prompt and I’m not sure if will work but it should.

anyway here is also JS version example

1 Like
5

Thank you for your help ! I have found a solution with this part of code

<script>
  $(document).ready(function() {
    // Sélectionne la checkbox et les autres champs en utilisant les classes
    var checkbox = $('.checkbox-naissance');  // Remplace par la classe de ta checkbox
    var fields = $('.field_conditioned');  // Remplace par les classes de tes champs texte

    // Fonction pour vérifier l'état de la checkbox
    checkbox.change(function() {
      if (checkbox.is(':checked')) {
        // Si la checkbox est cochée, rendre les champs obligatoires
        fields.each(function() {
          $(this).attr('required', 'required');
        });
      } else {
        // Si la checkbox est décochée, rendre les champs non obligatoires
        fields.each(function() {
          $(this).removeAttr('required');
        });
      }
    });

    // Pour s'assurer que les champs sont correctement configurés au chargement de la page
    if (checkbox.is(':checked')) {
      fields.each(function() {
$(this).removeAttr('required');
      });
    } else {
      fields.each(function() {
        $(this).attr('required', 'required');
      });
    }
  });
</script>

It’s works when I click on the checkbox but not at first, when the page has beed loaded. And the logic of the code is not the good one. It’s like if Webflow couldn’t see that my checkbox is not checked at the loading of my page.
Really Weird…

1 Like
6

Hey all!!

For anyone else looking to do this, this thread inspired me to make an attribute-based solution which is easy for all to implement :)

It can;

  • Set fields to required if checkbox is checked
  • Set fields to optional if checkbox is checked
  • Set fields to disabled if checkbox is checked/unchecked

Hopefully it helps!!

1 Like