在多個複選框，如何存儲一個答案JQuery Mobile

Question

我有多個問題每頁。問題是如果我回答第一個問題，那麼當我檢查第二個問題的答案時，第一個問題的答案將被取消選中，我的目標是每個問題將只有一個答案，答案將被存儲。

---

$('input.answer').on('change', function() { 
 
    $('input.answer').not(this).prop('checked', false); 
 
$('input.answer').not(this).prop('checked', false).checkboxradio("refresh"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
 
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet"/> 
 
<div class = "question">  
 
    
 
    
 
    <form> 
 
    <fieldset data-role="controlgroup"> 
 
     <legend for="0-0">my goal is having one answer per each question?to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend> 
 
     <label for="0-0-4">one</label> 
 
     <input class="answer answer-num-0" type="checkbox" name="0-0-4" id="0-0-4" value="4"> 
 
     <label for="0-0-3">two</label> 
 
     <input class="answer answer-num-0" type="checkbox" name="0-0-3" id="0-0-3" value="3"> 
 
     <label for="0-0-2">three</label> 
 
     <input class="answer answer-num-0" type="checkbox" name="0-0-2" id="0-0-2" value="2"> 
 
     <label for="0-0-1">four</label> 
 
     <input class="answer answer-num-0" type="checkbox" name="0-0-1" id="0-0-1" value="1"> 
 
     <label for="0-0-0">five</label> 
 
     <input class="answer answer-num-0" type="checkbox" name="0-0-0" id="0-0-0" value="0"> 
 
    </fieldset> 
 
    </form> 
 
    
 
    </div> 
 
      <div class="question"> 
 

 

 
     <form> 
 
    <fieldset data-role="controlgroup"> 
 
     <legend for="1-0">this is second question but when i check any answer from first question then check one of the answer of second question , first question's answer will be uncheck which is undesired.</legend> 
 
     <label for="0-1-4">six</label> 
 
     <input class="answer answer-num-1" type="checkbox" name="0-1-4" id="0-1-4" value="4"> 
 
     <label for="0-1-3">seven</label> 
 
     <input class="answer answer-num-1" type="checkbox" name="0-1-3" id="0-1-3" value="3"> 
 
     <label for="0-1-2">eight</label> 
 
     <input class="answer answer-num-1" type="checkbox" name="0-1-2" id="0-1-2" value="2"> 
 
     <label for="0-1-1">nine</label> 
 
     <input class="answer answer-num-1" type="checkbox" name="0-1-1" id="0-1-1" value="1"> 
 
     <label for="0-1-0">ten</label> 
 
     <input class="answer answer-num-1" type="checkbox" name="0-1-0" id="0-1-0" value="0"> 
 
    </fieldset> 
 
    </form> 
 
    </div> 
 
     <div class="question"> 
 
    <form> 
 
    <fieldset data-role="controlgroup"> 
 
     <legend for="1-1">to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend> 
 
    <label for="1-1-4">eleven</label> 
 
     <input class="answer answer-num-4" type="checkbox" name="1-1-4" id="1-1-4" value="4"> 
 
     <label for="1-1-3">twelve</label> 
 
     <input class="answer answer-num-4" type="checkbox" name="1-1-3" id="1-1-3" value="3"> 
 
     <label for="1-1-2">thirteen</label> 
 
     <input class="answer answer-num-4" type="checkbox" name="1-1-2" id="1-1-2" value="2"> 
 
     <label for="1-1-1">fourteen</label> 
 
     <input class="answer answer-num-4" type="checkbox" name="1-1-1" id="1-1-1" value="1"> 
 
     <label for="1-1-0">fifteen</label> 
 
     <input class="answer answer-num-4" type="checkbox" name="1-1-0" id="1-1-0" value="0"> 
 
    </fieldset> 
 
    </form> 
 
     </div>

Answer 1

在jQuery代碼，你必須表明只是所選擇的複選框的字段集，工作...

$('input.answer').on('change', function() { 

    $(this).closest('fieldset').find('input.answer').not(this).prop('checked',false).checkboxradio("refresh"); 

}); 

我希望它能幫助