-2

I am dynamically generating a list of multiple checkboxes via php.

<input type=\"checkbox\" name=\"quetext[]\" value=".$row_all_que['id'].">

The button which will post the data to php is disabled in the beginning.

<input type="button" value="Next" class="btn btn-primary btn-lg btn-block" id="send-que" disabled>

I want it to enable when at least one checkbox is checked. How will I do that?

Also, once I am done selecting the required checkboxes, I need to create an array of these checkboxes and pass their value to php.

Edit 1:

Since the data was coming from my server via ajax call, the checkbox elements were getting generated dynamically due to which the code that i had written inside document.ready() was not getting executed. I shifted my code into the 'success' function of the ajax call and the button enable/disable on checking the checkbox is working fine now.

Here's the jquery code snippet for the ajax call I made:

$.ajax({
        type: "POST",
        url: "ajaxData.php",
        data: data,

        success: function(data) {
            $('.quedata').html(data);
            var checkboxes = $('.quedata .ques-box');
            checkboxes.change(function(){
                $('#send-que').prop('disabled', !checkboxes.is(":checked"));
            });
        }
    });

Here the 'quedata' class is my tbody element inside which the checkboxes are getting generated.

This is the HTML structure:

<table class="table table-striped" style="margin-top: 50px;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Question</th>
                        <th>Mark(s)</th>
                        <th><input type="checkbox" disabled></th>
                    </tr>
                </thead>
                <tbody class="quedata">
                </tbody>
            </table>

Edit 2: Solved

Including the code inside the success part of my ajax call solved it and I am getting my desired output. I have posted an answer including the code.

4
  • What have you tried to achieve your wanted results? What has your research concerning your problem shown? Can you provide code of your tries? How do I ask a good question and How much research effort is expected might be helpful to improve your question. Commented Jan 10, 2018 at 5:37
  • I got the button enable/disable working. I will edit my question and add what I did to achieve it. @Geshode Commented Jan 10, 2018 at 5:56
  • Solved the problem. @Mr.x I had tried that before, but due to the dynamic generation of the checkboxes, it didnt work before. Now it is. Thanks for the help though. Commented Jan 10, 2018 at 6:14
  • Please post the solution as an answer instead of just an edit to the question - after 48 hours you can accept it to show the problem has been solved.Thanks. Commented Jan 10, 2018 at 6:22

1 Answer 1

0

I edited the checkbox element a little and added a class to it:

<input type=\"checkbox\" name=\"quetext[]\" class=\"ques-box\" value=".$row_que['id'].">

Here's the jquery code snippet for the ajax call I made:

$.ajax({
    type: "POST",
    url: "ajaxData.php",
    data: data,

    success: function(data) {
        $('.quedata').html(data);
        var checkboxes = $('.quedata .ques-box');
        checkboxes.change(function(){
            $('#send-que').prop('disabled', !checkboxes.is(":checked"));
        });
    }
});

And this is the array generation code:

$(document).ready(function() {

    $('#send-que').click(function(){
        var checked = [];
        $('.ques-box:checked').each(function(){
            checked.push($(this).val());
        });
        for(var i=0; i<checked.length; i++) {
            alert(checked[i]); //Check if values are added
        }
    });
});

Sorry for the lack of research before posting, it was my first question on stackoverflow.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.