javascript - 如果仅单击一个星形按钮，如何启用禁用按钮

Question

我正在使用 codeigniter，并且我有一个用户可以对产品进行评分的表单。我的代码如下所示。我需要在开始时禁用提交按钮，并且当用户选择星形按钮时，只需要启用该提交按钮。我怎样才能做到这一点？请任何人指导我。因为我不明白我从互联网粘贴的 JavaScript 代码。有人可以帮助我吗？

businessRateView.php

 <?php $Vehicleid=$details['id']; ?>
                            <form action="<?php echo 'http://localhost/ci/businessRateCtrl/insertIntoBusinessReview/'.$Vehicleid?> " method="POST">

                            <h2>Rate Ad</h2>
                            <p>All field marked with * are required</p>
                            <div style="color:red">
                        <?php
                            $CI =& get_instance();
                            $CI->load->library('form_validation');
                            echo validation_errors();
                        ?>
                        </div>

                             <div class="spacer-20"></div>
                            <h4>Your rating*</h4>


                            <h1><div class="rating" style="width:200px;float:left;padding-left:1px">
                                <span class="rate-star" data-rate="Excellent">&bigstar;</span> 
                                <span class="rate-star" data-rate="Good" >&bigstar;</span> 
                                <span class="rate-star" data-rate="Okay" >&bigstar;</span>
                                <span class="rate-star" data-rate="Unsatisfied" >&bigstar;</span>
                                <span class="rate-star" data-rate="Terrible" >&bigstar;</span>
                                </div>
                            </h1>

                            <div style="float:right;padding-right:450px">
                            <h3><label id="rateText" name="lblrating"></label></h3>
                            </div>


                            <div class="spacer-20"></div>



                             <h4>Write your review</h4>
                              <div class="spacer-20"></div>
                            <label class="col-md-4"> Title </label> 
                            <input type="text" name="reviewTitle" placeholder="Title your review" class="form-control">     

                            <div class="spacer-20"></div>

                            <label class="col-md-4">Your review </label>       
                            <textarea rows="10" cols="103" name="review" placeholder="Write your review" class="form-control"></textarea>
                            <div class="spacer-20"></div>
                            <a class="btn btn-primary btn-lg" href=<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.$Vehicleid?>  onclick="return cancelConfirm();">Cancel</a>

                            <input type="submit" name="submitreview" class="btn btn-primary btn-lg" value="SUBMIT">

                            </form>
                        </div>
                    </section>
                    </div>
                </div>
            </div>
        </div>
            <script type="text/javascript">
                    window.onload = function() {
                    var starList = document.getElementsByClassName('rate-star');  
                    var numOfStars = starList.length;

                        for(var i = 0; i < numOfStars; i++) {
                            starList[i].addEventListener('click', starClickHandler, false);
                        }
                    }

                        function starClickHandler(event) {
                            var star = event.currentTarget;

                            setActive(star, false);
                            setActive(star, true);
                            document.getElementById('rateText').textContent = star.getAttribute('data-rate');
                        }

                        function setActive(element, isActive) {
                            if(isActive) {
                            element.classList.add('active');
                            element.nextElementSibling && setActive(element.nextElementSibling, isActive);
                            }
                            else {
                            element.classList.remove('active');
                            element.previousElementSibling && setActive(element.previousElementSibling, isActive);
                            }
                            }



                        function cancelConfirm(){
                            return confirm("Are you sure you want to cancel and leave this page?");
                        }

            </script>

            <style type="text/css">
                        #rateText{

                    text-align:right;

                        }
                        .rating {
                            unicode-bidi: bidi-override;
                            direction: rtl ;
                                }


                                .rating > .rate-star.active,
                                .rating > .rate-star:hover,
                                .rating > .rate-star:hover ~ .rate-star {
                                     color: #FFFF00;
                                    cursor: default;
                                    }
            </style>

businessRateCtrl.php

 public function loadReviewPage($vehicleid){


    $data=array();
    $data['details']['id']=$vehicleid;

    $this->load->view('pages/templates/header');
        $this->load->view('pages/businessRateView',$data);
        $this->load->view('pages/templates/footer');



}

public function insertIntoBusinessReview($Vehicleid){

      $data=array();
    $data['details']['id']=$Vehicleid;

 $this->form_validation->set_rules
        (
            'lblrating',
            'lblrating', 
            'required',
            array
            (
                'required'      => 'You have not provided Rating',

            )
        );


          if ($this->form_validation->run() == FALSE)
        {
          $this->load->view('pages/templates/header');
            $this->load->view('pages/businessRateView',$data);
            $this->load->view('pages/templates/footer');

        }

else{
          $this->main_model->insertIntoBusinessReview($Vehicleid);
      //$_SESSION['ads']=$_SESSION['ads']+1;
      $this->session->set_flashdata('success_msg', 'Thank you! We will post your review soon');
      redirect("<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.'$Vehicleid' ?>");

    }

}

主模型.php

公共(public)函数 insertIntoBusinessReview($Vehicleid){

    $rating = $_POST['lblrating'];

    if(($_POST['reviewTitle'])!==null || ($_POST['review'])!==null)
    {
    $title=$_POST['reviewTitle'];
    $review=$_POST['review'];

    $data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'title'=>$title,'review'=> $review,'reviewPoster'=>$this->session->userdata['logged_in']['email']);
    $this->db->insert('businessreviews',$data);
    }

    $data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'reviewPoster'=>$this->session->userdata['logged_in']['email']);
    $this->db->insert('businessreviews',$data);


}

这里

function starClickHandler(event) {
                            var star = event.currentTarget;

                            setActive(star, false);
                            setActive(star, true);
                            document.getElementById('rateText').textContent = star.getAttribute('data-rate');

从上面的代码中，它将标签“rateText”设置为“Excellent”、“Good”或属于所单击的按钮的任何文本。

因此，如果我需要获取文本“Excellent”、“Good”等并将其插入数据库，我该怎么做？您能帮我一下吗？

Answer 1

您可以使用 Remove attribute

$(document).ready(function(){
    $(".rating .rate-star").click(function(){
        $(".active").removeClass("active");
        $( ".rate-star:lt("+($(this).index()+1)+")" ).addClass("active");
        $("#rateText").html($(this).data("rate"));
        $("#submitreview").removeAttr("disabled");
    });
});

Sample of your code