JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="2.php" method="post">
    <input type="checkbox"  name="fruit[]" id="id1"  class="box" value="Banana"> Banana
    <input type="checkbox"  name="fruit[]" id="id2"  class="box" value="Cherry"> Cherry
    <input type="checkbox"  name="fruit[]" id="id3"  class="box" value="Strawberry"> Strawberry
    <input type="checkbox"  name="fruit[]" id="id4"  class="box" value="Orange"> Orange
    <input type="checkbox"  name="fruit[]" id="id5"  class="box" value="Peach"> Peach
    <input type="hidden" id="actualvalue" name="actualvalue" />
    <input type="submit" id="groupdelete" value="clickme">
</form>

JavaScript

$("#myForm").submit(function(e) {    
    var names = [];
    $(this).children('input[name="fruit\[\]"]:checked').each(function() {
        names.push($(this).attr("id")); //it better to pass value by using $(this).val()
    });    
    $("#actualvalue").val(names.join(","));
    $(this).children('input[name="fruit\[\]"]').attr('disabled','disabled');
    
    console.log($(this).serialize());
    e.preventDefault(); //remove this part
});