JS函数检查所有复选框，不需要

Question

Sorry that the title is very weird. So, I am using Visual Studio MVC and I am creating a website. I have 5 rows of 30 buttons in bootstrap. When you click on these buttons a modal pops up with a checkbox. When the checkbox is clicked, it makes the modal button change to red. Unfortunately, it checks all the checkboxes for each button and each modal. I have a feeling it's because of the id or something, but I cannot change each id for each button because I am creating over 150 buttons. So I need only 1 button to change colors when the checkbox is clicked. I have added the jsfiddle, for a more simple view.Thank you for all your help.

---

This is related to another post I created: Link

JSFiddle: Fiddle Link

So far I have:

@{int k= 0;}
@for (int j = 0; j < 5; j++) { 
    @for (int i = 0; i < 30; i++)
    {
        k = k + 1;

    }
}

Inside the second for loop is:

<button id="btn1" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">@k</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">@(k)</h4>
     </div>
     <div class="modal-body">
       <form role="form">
         <div class="checkbox callback-to-button">
           <label><input type="checkbox"> Remember me</label>
         </div>
         <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Since you are already looping, you can easily associate a dynamic id for each instance.

<button id="btn@k" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal@k">@k</button>
<!-- Modal -->
<div class="modal fade" id="myModal@k" 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">@(k)</h4>
     </div>
     <div class="modal-body">
       <form role="form">
         <div class="checkbox callback-to-button">
           <label><input type="checkbox" data-target="#btn@k"> Remember me</label>
         </div>
         <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Having a event listener to the div is a bad idea, you can have a change event listener on the checkbox itself, and if you see clearly on the above HTML i have added data-target attribute to checkbox.

Please refer to the Javascript below:

$('.modal input[type="checkbox"]').change(function(){
 var target = $(this).attr('data-target');

 $(target).css({'background':'red'});
});

Answer 2

I am sorry for all the confusion, but it was actually my modal not having a unique id and so the first modal of the for loop was created 150 times.

I simply had to put @(k) in the modal id.

<div class="modal fade" id="myModal-@(k)" tabindex="-1" role="dialog">

Works amazing now! This post helped: Link

Thanks for all the help!