2015-07-03 181 views
0

我正在創建一個單選按鈕,按下後會打開一個帶有細節的手風琴。我已經想出了手風琴的創作。但是,當我按下其他按鈕時,選定/檢查的收音機不會改變,但他們的手風琴確實打開了,但選擇仍然是第一個。我已經將第一個作爲初始默認選擇。帶手風琴的單選按鈕,選中的單選按鈕不會改變

當我沒有實現手風琴時,我能夠改變單選按鈕之間的選擇。

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script> 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
</script> 
<div class="container-fluid bg-default" id="rides"> 
    </div> 
    <div class="col-md-6 col-md-offset-3 "> 
      <fieldset > 
       <div id = "accordion"> 
        <div class="radio"> 
         <input type="radio" name="ride_id" id="radio1" value="1" checked = "checked"> 
         <label class="btn-list btn-block btn-xl" for="radio1"> 
          <span class="col-sm-5">Los Angeles </span> 
          <span class="col-sm-2"><i class="fa fa-arrows-h"></i></span> 
          <span class="col-sm-5">Las Vegas</span> 
         </label> 
        </div> 
        <div>Details of route 1</div> 
        <div class="radio"> 
         <input type="radio" name="ride_id" id="radio2" value="2"> 
         <label class="btn-list btn-block btn-xl" for="radio2"> 
          <span class="col-sm-5">Los Angeles</span> 
          <span class="col-sm-2"><i class="fa fa-arrows-h"></i></span> 
          <span class="col-sm-5">San Francisco</span> 
         </label> 
        </div> 
        <div>Details of route 2</div> 
        <div class="radio"> 
         <input type="radio" name="ride_id" id="radio3" value="3"> 
         <label class="btn-list btn-block btn-xl" for="radio3"> 
          <span class="col-sm-5">Los Angeles</span> 
          <span class="col-sm-2"><i class="fa fa-arrows-h"></i> </span> 
          <span class="col-sm-5">Sacramento</span> 
         </label> 
        </div> 
        <div>Details of route 3</div> 
       </div> 
       <br> 
       <div class="row"> 
       <div class="col-sm-12"> 
        <div class="col-lg-8 col-lg-offset-2 text-center"> 
        <a onclick="" href='#register' class="btn btn-primary btn-xl btn-block page-scroll">Book</a> 
        </div> 
       </div> 
      </fieldset> 
    </div> 
</div> 

回答

0

問題似乎是通過附加手風琴單擊事件不再達到單選按鈕。您可以通過單擊時保存單選按鈕並在動畫結束時檢查它來解決此問題。

$(function() { 
    var inputClicked; 
    $("#accordion").accordion({ 
     beforeActivate: function(evt, ui){ 
      inputClicked = $('input', evt.currentTarget) 
      //$('input', evt.currentTarget).prop("checked", "checked"); 
     }, 
     activate: function(evt, ui){ 
      inputClicked.prop("checked", "checked"); 
     } 
    }); 
}); 

http://jsfiddle.net/hw4vx3cy/1/

例如運行
0

我想你需要改變你的jQuery。執行以下步驟:

  1. 首先,知道單擊哪個單選按鈕。
    爲所有單選按鈕聲明相同的class class =「radio_class」,並使用.change功能檢測更改。
  2. 取消選中所有單選按鈕(或取消選中先前選中的單選按鈕)
  3. 檢查單擊的單選按鈕並運行手風琴。

    訪問以下鏈接: jQuery check/uncheck radio button onclick
    請參閱由Jurrie給出了答案。