At least one checkbox should be selected before submit

A dynamically structured input and checkbox are available, but at least one checkbox must be selected before submit.

What should I do for it?

Demo on JSfiddle

Javascsript

$(document).ready(function () {
	var max_fields = 32; //maximum input boxes allowed
	var wrapper = $(".cameras"); //Fields wrapper
	var add_button = $(".add-camera"); //Add button ID
	var x = 1; //initlal text box count
	$(add_button).click(function (e) { //on add input button click
		e.preventDefault();
		if (x < max_fields) { //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
		}
	});
	$(wrapper).on("click", ".remove-camera", function (e) { //user click on remove text
		e.preventDefault();
		$(this).parent('div').remove();
		$(".camerasCounter").each(function (elm) {
			var count = elm + 1
			$(this).attr("name", "Camera " + count);
			$(this).attr("value", "Camera " + count);
			x = elm + 1;
		});
	})
});

HTML:

<div class="cameras">
  <div class="camera-field">
    <button type="button" class="add-camera btn btn-primary">+ Add Camera
												</button>
  </div>

  <div class="control-group input-group">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
        </div>
      </div>
      <input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
      <div class="input-group-btn"> 
      </div>
    </div>
  </div>
</div>

<div class="col-sm-6 col-xl-4">
  <button type="submit" class="btn btn-primary">submit</button>
  <div class="mt-2"> 
  </div>
</div>

https://jsfiddle.net/y3k19z8w/

Thank you so much!
I have a little question. The Submit button is still sending after alert… Is it possible to close the Submit function?

Submit button doesn’t send anything. It only checks checkboxes.

Unfortunately but sending empty data. Perhaps there are other factors that affect the sending. I’il try to find out why.

P.S.: What should be done to prevent page refresh?


Also clicking the *Remove* button only deletes the button. Input is in place. Why do you think that might be the reason?

google “preventDefault”

Currently you’re removing parent of clicked button that is a div around the button. You should remove parent of the parent: $(this).parent('div').parent().remove();

I did it, thank you @jenovs

Hi again,

I’ve asked for checkboxes before. Now my question is for inputs.
Is the code below suitable for inputs?
Code work, but this part was fitted to my mind => input.valueOf()).length

I was wondering about your opinion.

const checkedOptions = Array.from(xds).filter(input => input.valueOf()).length