événement jQuery Checkbox ajouté cumulativement

Le but avec cette logique est: -événement jQuery Checkbox ajouté cumulativement

Pour obtenir un modal bootstrap pour ouvrir sur case à cocher cliquez sur
Pour avoir deux boutons dans le modal qui confirme ou annule cette option.
suffit la case à cocher qui a été cliqué affecté

Le problème est que lorsque plusieurs cases à cocher, ils ont été cliqué partagent le même événement et plus vous cliquez plus qui sont effectuées. J'ai essayé différentes solutions pour essayer de faire en sorte que l'événement click n'affecte que cette case particulière, même si je n'ai pas eu de chance d'obtenir ce dernier point.

Je serais vraiment reconnaissant pour toute aide!

//listen for a click on the checkbox 
 
var confirm = $('#validationConfirm'); 
 
var cancel = $('#validationCancel'); 
 

 
function modalCheck(e, element) { 
 
    console.log(e.srcElement.checked) 
 
    if (amIclicked(e, element)) { 
 
    confirm.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = true 
 
    }); 
 
    } 
 
    if (amIclicked(e, element)) { 
 
    cancel.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = false 
 
    }); 
 
    } 
 
} 
 

 
function amIclicked(e, element) { 
 
    e = e || event; 
 
    var target = e.target || e.srcElement; 
 
    if (target.id == element.id) 
 
    return true; 
 
    else 
 
    return false; 
 
}

#validationModal { 
 
    top: 20%; 
 
} 
 

 
.validationModal-body { 
 
    text-align: center; 
 
    padding: 5%; 
 
} 
 

 
.validationModal-body h2 { 
 
    font-weight: 600; 
 
} 
 

 
.validationModal-body .row { 
 
    padding: 2%; 
 
} 
 

 
.Staf-login__table .row :nth-child(4) { 
 
    text-align: initial; 
 
} 
 

 
.Staf-login__table .row { 
 
    padding: 1% 0; 
 
} 
 

 
@media (max-width: 770px) { 
 
    .voucher-code-checker--go { 
 
    width: 100%; 
 
    padding: 1em; 
 
    text-align: center; 
 
    } 
 
    .btn-purple.go { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.Staff-login__view-more ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-flow: row; 
 
} 
 

 
.Staff-login__view-more li { 
 
    border: 1px solid #D4D4D4; 
 
    border-radius: 50px; 
 
    padding: 0px 10px; 
 
    font-size: 0.8em; 
 
    margin: 0 2.5px; 
 
} 
 

 
.Staff-login__view-more a { 
 
    color: #4A4A4A; 
 
} 
 

 
.Staff-login__view-more li:hover { 
 
    background: #2D988D; 
 
    color: #fff; 
 
    opacity: 0.5; 
 
} 
 

 
.Staff-login__view-more li.active { 
 
    background: #2D988D; 
 
    color: #fff; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="../Sass/scripts/jquery-3.2.1.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <title>Voucher Code Checker</title> 
 
</head> 
 

 
<div class="Staff-login__wrapper"> 
 
    <div class="Staff-login__header"> 
 
    <div class="row flex"> 
 
     <div class="col-xs-10 col-sm-4 col-md-4 Spaced_x-small" id="StaffLogin"> 
 
     <h3>Voucher Code Checker</h3> 
 
     </div> 
 
     <div class="col-sm-0 Spaced_x-small"><a href="#">LOGOUT</a></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-8 no-padding"> 
 
     <div id="staffLoginIndexSearch" class="col-sm-7"> 
 
      <div class="input-group stylish-input-group"> 
 
      <input type="text" class="form-control" placeholder="Search..."> 
 
      <span class="input-group-addon"> 
 
          <button type="submit"> 
 
           <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="voucher-code-checker--go col-sm-2"><button class="btn-purple go">Go</button></div> 
 
     </div> 
 

 
     <div class="col-sm-4 Staff-login__create_back--btn"> 
 
     <button class="btn-purple">BACK</button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <!--Staff Login Table--> 
 
    <div class="Staf-login__table Spaced_x-small"> 
 
    <div class="row primary-bg"> 
 
     <div class="col-xs-2 col-sm-2">Name</div> 
 
     <div class="col-xs-2 col-sm-2">Email</div> 
 
     <div class="col-xs-2 col-sm-2">Code</div> 
 
     <div class="col-xs-2 col-sm-4">Validate</div> 
 
     <div class="col-xs-2 col-sm-2">More Details</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test2" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <!--View More--> 
 
    <div class="Staff-login__view-more"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li> 
 
      <p> 
 
       <</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li class="active"> 
 
      <p>1</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>2</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>3</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>></p> 
 
      </li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <!-- Validation Modal --> 
 
    <div id="validationModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="validationModal-body"> 
 
      <h2>Are you sure you want to validate this code?</h2> 
 
      <div class="row"> 
 
      <div class="col-sm-6" style="text-align: right;"><button class="btn-purple" id="validationConfirm">confirm</button></div> 
 
      <div class="col-sm-6" style="text-align: left;"><button class="btn-purple" id="validationCancel">cancel</button></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Source

2017-10-09 Harry

Je résolus avec le .unbind 'gestionnaire d'événements de type'.

confirm.unbind("click"); 
    cancel.unbind("click");

http://api.jquery.com/unbind/

qui a supprimé les événements précédents qui ont été empiler. Cependant, sans forcer le modal à fermer et à réinitialiser l'événement pour recommencer à zéro, cela ne fonctionne pas.

Donc dans l'ensemble il a fini par ressembler à ceci:

//listen for a click on the checkbox 
    var confirm = $('#validationConfirm'); 
    var cancel = $('#validationCancel'); 

    function modalCheck(e, element) { 
     console.log(e.srcElement.checked) 
     //confirm button 
     if (amIclicked(e, element)) { 
      var confirmClick = confirm.click(function() { 

       element.checked = true 
        confirm.unbind("click"); 
        cancel.unbind("click"); 

       //closes modal 
        $(function() { 
         $('#validationModal').modal('toggle'); 
        }); 
      }); 
     } 
     //cancel button 
     if (amIclicked(e, element)) { 
      var cancelClick = cancel.click(function() { 
       element.checked = false 

       confirm.unbind("click"); 
       cancel.unbind("click"); 

       //closes modal 
       $(function() { 
        $('#validationModal').modal('toggle'); 
       }); 
      }); 
     } 
    } 

    function amIclicked(e, element) { 
     e = e || event; 
     var target = e.target || e.srcElement; 
     if (target.id == element.id) 
      return true; 
     else 
      return false; 
    }

Source

2017-10-09 14:42:55 Harry

événement jQuery Checkbox ajouté cumulativement

Répondre

Questions connexes