JS函數檢查所有不需要的複選框

對不起，標題很奇怪。所以，我正在使用Visual Studio MVC並創建一個網站。 bootstrap中有5行30個按鈕。當你點擊這些按鈕時，彈出一個複選框。點擊複選框後，模式按鈕會變爲紅色。不幸的是，它檢查每個按鈕和每個模式的所有複選框。我有一種感覺，這是因爲id或某事，但我不能更改每個按鈕的每個id，因爲我創建了超過150個按鈕。所以我點擊複選框時只需要1個按鈕就可以改變顏色。我添加了jsfiddle，以獲得更簡單的視圖。感謝您的全力幫助。JS函數檢查所有不需要的複選框

這涉及到另一個崗位，我創建：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>

來源

2015-07-20 shay2013

你真的應該更好地識別你的按鈕......不僅是所有的按鈕都帶有'id =「btn1」'無效的html，它使得像這樣的任務不必要地過度複雜。由於該代碼處於循環中，爲什麼不能將迭代器附加到它上面，所以id是「btn」+ k。你的複選框可以跟隨，所以你知道是否有人點擊複選框＃30，你改變了'btn30'的顏色。 – king14nyr

@ king14nyr剛剛嘗試過，並沒有奏效。 – shay2013

由於您已經循環，因此您可以輕鬆地將每個實例的動態ID關聯起來。

<button id="[email protected]" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#[email protected]">@k</button> 
<!-- Modal --> 
<div class="modal fade" id="[email protected]" 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="#[email protected]"> 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'}); 
});

來源

2015-07-20 14:15:21 Ammadu

不幸的是，這似乎並沒有工作。我收到了模態ID的語法錯誤。所以我在myModal @k之間放了一個空格。語法錯誤消失了，但現在模態不會彈出 – shay2013

你得到的錯誤是什麼？它必須是一些模板渲染問題，它不按預期分配ID。你能提供你得到的錯誤和一個帶有按鈕的模態的HTML嗎？ – Ammadu

錯誤：0x800a139e - JavaScript運行時錯誤：語法錯誤，無法識別的表達式：＃myModal @ k – shay2013

我爲人人的混亂很抱歉，但它實際上是我的模式不具有唯一的ID，因此for循環被創造150倍的第一模。

我只需將@（k）放在模式ID中。

<div class="modal fade" id="[email protected](k)" tabindex="-1" role="dialog">

現在令人驚歎！此貼幫助了：Link

感謝您的幫助！

來源

2015-07-21 12:37:03 shay2013

JS函數檢查所有不需要的複選框

回答

相關問題