如果只有一個星形按鈕被點擊，如何啓用禁用的按鈕

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' ?>"); 

    } 

}

mainmodel.php

公共職能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」到「優秀」，「良好」或任何文本屬於哪個按鈕被按下。

所以，如果我需要採取文字「優秀」，「好」等，並將其插入到數據庫我怎麼能做到這一點？你能請你幫我一下嗎？

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