checkbox: jQuery Checkbox event being added cumulatively

The goal with this logic is:-

To get a bootstrap modal to open on checkbox click
To have two buttons within the modal that confirms or cancels that option.
Have ONLY the checkbox that was clicked affected

The problem is that when multiple check boxes have been clicked they all share the same event and the more you click the more that are effected. I've tried various solutions to try and have the click event only affect that particular checkbox though I've had no luck getting this final point.

I would be really grateful for any help!

//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="http://ift.tt/1oMJErh"></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="http://ift.tt/1mcB1qV" rel="stylesheet">
  <link rel="stylesheet" href="http://ift.tt/2apRjw3" />
  <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="http://ift.tt/2aHTozy"></script>

checkbox

lundi 9 octobre 2017

jQuery Checkbox event being added cumulatively

Aucun commentaire:

Enregistrer un commentaire