如果點擊引導模式上的是按鈕，只勾選複選框

Question

如果我想檢查一個複選框，那麼如果點擊引導模式上的「YES」按鈕，則複選框必須檢查並且如果單擊「否」按鈕則保持取消勾選。

另一方面，如果想取消選中複選框，那麼如果在引導模式中單擊了「YES」按鈕，則複選框必須取消選中並保持檢查是否單擊「否」按鈕。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container"> 
    <label class="checkbox-inline"> 
     <input type="checkbox" value="" class="status">John Doe 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" value="" class="status" checked>James Doe 
    </label> 

    <!-- Activate --> 
    <div class="modal fade" id="activate" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Activate?</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button> 
      <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>   </div> 
     </div> 

    </div> 
    </div> 

    <!-- Deactivate --> 
    <div class="modal fade" id="deactivate" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Deactivate?</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button> 
      <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>   </div> 
     </div> 

    </div> 
    </div> 
</div> 

JQUERY

$('.status').click(function(){ 
    if($(this).is(':checked')) { 
     $('#activate').modal('show'); 
    } else { 
     $('#deactivate').modal('show'); 
    } 
}); 

的jsfiddle

https://jsfiddle.net/br86rjby/

說這句話 http://jsfiddle.net/dfKEZ/

但只有它應該是一個引導模式

感謝您的幫助！

Answer 1

您應該使用.preventDefault()，如果你不想的複選框來改變單擊其狀態

// variable will hold a checkbox: 
var status_box = null; 

$('.status').click(function(event){ 
    event.preventDefault(); 
    // set which checkbox has been clicked: 
    status_box = this; 
    if($(this).is(':checked')) { 
    $('#activate').modal('show'); 
    } else { 
    $('#deactivate').modal('show'); 
    } 
}); 

然後點擊註冊爲內模按鈕事件處理程序：

$('.btn-yes').click(function(){ 
    $(status_box).prop('checked', !status_box.checked); 
}); 

JSFiddle Demo

---

或者，你可以擺脫status_box變量通過存儲在'.btn-yes'按鈕的點擊data-* attribute複選框：

$('.status').click(function(event){ 
    event.preventDefault(); 
    $('.btn-yes').data('status_box', this); 
    $(this.checked ? '#activate' : '#deactivate').modal('show'); 
}); 

$('.btn-yes').click(function(){ 
    var box = $(this).data('status_box'); 
    box.checked = !box.checked; 
}); 

Demo

Answer 2

可以保存點擊複選框並返回false，以防止它改變狀態。然後選中或取消選中它基於在對話框中按下哪個按鈕：

var clickedCheckox; 
 

 
$('.status').click(function(){ 
 
\t clickedCheckbox = $(this); 
 
    if(clickedCheckbox.is(':checked')) { 
 
    $('#activate').modal('show'); 
 
    } else { 
 
    $('#deactivate').modal('show'); 
 
    } 
 

 
    return false; 
 
}); 
 

 
$("#activateBtn").click(function() { 
 
\t clickedCheckbox.prop("checked", true); 
 
}); 
 

 
$("#deactivateBtn").click(function() { 
 
\t clickedCheckbox.prop("checked", false); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" id="checkboxJohn" value="" class="status">John Doe 
 
    </label> 
 
    <label class="checkbox-inline"> 
 
     <input type="checkbox" id="checkboxJames" value="" class="status" checked>James Doe 
 
    </label> 
 

 
    <!-- Activate --> 
 
    <div class="modal fade" id="activate" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Activate?</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button id="activateBtn" type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button> 
 
      <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>   </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
    <!-- Deactivate --> 
 
    <div class="modal fade" id="deactivate" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Deactivate?</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button id="deactivateBtn" type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button> 
 
      <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>   </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>