Checkbox is not displaying when applying css

Question

Hi Team

I have this code below, the issue with my checkbox are not displaying and there is not js file conflict when inspecting the element from the browser. What could be an issue? Please assist, thanks.

 

//css

#input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

// html and php

<!-- BOOK COURSES -->
<div class="udb-sec udb-cour">
    <h4><img src="images/icon/db2.png" alt="" /> Booking Courses</h4>
    <p>The courses available for booking or registration by the student.</p>
    <form id="courseForm" action="register_course.php" method="POST">
        <div class="sdb-cours">
            <?php
            include 'db_connection.php'; // Include the database connection

            // Check if the user is logged in
            if (!isset($_SESSION['user_id'])) {
                header("Location: index.html");
                exit;
            }

            $user_id = $_SESSION['user_id']; // Get the user ID from the session

            // Check if the connection is still valid
            if (!$conn->ping()) {
                die("Database connection failed.");
            }

            // Query to fetch available courses for the logged-in user
            $sql = "
            SELECT ac.course_id, ac.course_name, ac.duration, ac.category, ac.image
            FROM available_courses ac
            LEFT JOIN student_modules sm ON ac.course_name = sm.module_name AND sm.student_id = ?
            WHERE sm.student_id IS NULL";

            // Prepare the SQL statement
            $stmt = $conn->prepare($sql);
            if (!$stmt) {
                die("Error preparing the query: " . $conn->error);
            }

            // Bind the parameters
            $stmt->bind_param("i", $user_id); // Bind the user_id parameter

            // Execute the statement
            if (!$stmt->execute()) {
                die("Error executing the query: " . $stmt->error);
            }

            // Get the result
            $result = $stmt->get_result();
            if ($result === false) {
                die("Error fetching the result: " . $stmt->error);
            }

            // Check if courses exist for the logged-in user
            if ($result->num_rows > 0) {
                echo '<table class="table table-striped">';
                echo '<thead class="table-dark">';
                echo '<tr>';
                echo '<th scope="col">Select</th>';
                echo '<th scope="col">Image</th>';
                echo '<th scope="col">Course Name</th>';
                echo '<th scope="col">Duration</th>';
                echo '<th scope="col">Category</th>';
                echo '</tr>';
                echo '</thead>';
                echo '<tbody>';
                while ($row = $result->fetch_assoc()) {
                    // Ensure image path is web-accessible
                    $imagePath = str_replace('C:/xampp/htdocs/', '/', htmlspecialchars($row['image']));

                    echo '<tr>';
                    echo '<td><input type="checkbox" name="course_ids[]" value="' . htmlspecialchars($row['course_id']) . '"></td>';
                    echo '<td><img src="' . $imagePath . '" alt="Course Image" width="100"></td>';
                    echo '<td class="module-name">' . htmlspecialchars($row['course_name']) . '</td>';
                    echo '<td>' . htmlspecialchars($row['duration']) . '</td>';
                    echo '<td>' . htmlspecialchars($row['category']) . '</td>';
                    echo '</tr>';
                }
                echo '</tbody>';
                echo '</table>';
            } else {
                echo '<p>No courses available at the moment.</p>';
            }

            // Close the statement and the connection
            $stmt->close();
            $conn->close();
            ?>
        </div>
        <button type="submit" id="registerButton" class="btn btn-primary" disabled>Register</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const courseForm = document.getElementById('courseForm');
    if (courseForm) {
        courseForm.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('input[name="course_ids[]"]:checked');
            const registerButton = document.getElementById('registerButton');
            if (registerButton) {
                registerButton.disabled = checkboxes.length === 0;
            }
        });
    }
});
</script>