Question

很抱歉，标题非常奇怪。所以，我正在使用Visual Studio MVC，我正在创建一个网站。我在bootstrap中有5行30个按钮。当您单击这些按钮时，会弹出一个带有复选框的模态。单击复选框时，会使模态按钮变为红色。不幸的是，它会检查每个按钮和每个模态的所有复选框。我有一种感觉，因为id或者其他东西，但是我无法更改每个按钮的每个id，因为我创建了超过150个按钮。所以当单击复选框时，我只需要1个按钮来更改颜色。我添加了jsfiddle，以获得更简单的视图。感谢您的帮助。

这与我创建的另一篇文章有关：Link

JSFiddle：Fiddle Link

到目前为止，我有：

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

    }
}

第二个for循环内部是：

<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

由于您已经在循环，因此您可以轻松地为每个实例关联动态ID。

<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>

拥有div的事件监听器是一个坏主意，你可以在复选框本身上有一个更改事件监听器，如果你在上面的HTML上清楚地看到我已经将数据目标属性添加到复选框。

请参阅下面的Javascript：

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

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

Answer 2

我很抱歉所有的困惑，但实际上我的模态没有唯一的id，所以for循环的第一个模态创建了150次。

我只需要将@（k）放在模态ID中。

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

现在工作惊人！这篇文章帮助：Link

感谢您的帮助！

JS功能检查所有不需要的复选框

2 个答案: