複選框沒有觸發

這裏是我的代碼： http://jsfiddle.net/raficsaza/mgukxouj/複選框沒有觸發

的問題是我不能使用此複選框，它被困在錯誤的價值，而不是移動的。我可以順利通過「輸入」的標籤，因爲我無法將其刪除...

<div class="toggler"> 
     <input class="toggler-checkbox" data-val="true" data-val-required="The isOK field is required." id="isOK" name="isOK" type="checkbox" value="true" /><input name="isOK" type="hidden" value="false" /> 
     <label class="toggler-label" for="mytoggler"> 
      <span class="toggler-inner"></span> 
      <span class="toggler-switch"></span> 
     </label> 
      </div>

來源

2014-09-23 Rafaelo

確實[這個例子]（http://jsfiddle.net/x1wbqmdz/）與您的應用程序工作嗎？ – misterManSam 2014-09-23 04:47:02

仍然灰色......是否有任何可能的解決方案觸發標籤輸入？ – Rafaelo 2014-09-23 04:54:30

相鄰的兄弟選擇不工作，因爲你的複選框後的標籤之前有一個隱藏的輸入。改變你的HTML將它移動到之前，像這樣：

<input name="isOK" type="hidden" value="false" /> 
<input class="toggler-checkbox" data-val="true" data-val-required="The isOK field is required." id="isOK" name="isOK" type="checkbox" checked />

順便說一句，你不應該使用相同的name屬性的複選框，並隱藏輸入兩者。如果您希望默認選中該複選框，則還應該使用checked屬性，而不是value="true"。

其次，你的標籤不指向你的複選框，您需要更改for屬性相匹配的複選框的ID：

<label class="toggler-label" for="isOK">

如果您不能移動/刪除隱藏的輸入，可以仍然得到的標籤通過更改CSS：

.toggler-checkbox:checked + input + .toggler-label .toggler-inner { 
    margin-left: 0; 
} 
.toggler-checkbox:checked + input + .toggler-label .toggler-switch { 
    right: 0px; 
}

Working fiddle

來源

2014-09-23 04:57:08 AlliterativeAlice

對不起，關於標籤（我的錯誤）...但我不能移動它，因爲我使用MVC，這是自動生成的。這就是爲什麼我試圖找到一種方式來跳過hiddden輸入 - 如果你只是刪除這條線應該完美，但我需要它。 .. – Rafaelo 2014-09-23 05:08:05

@Rafaelo我已經更新了我的答案和小提琴，以解決無法更改隱藏輸入的問題。 – AlliterativeAlice 2014-09-23 05:51:22

複選框沒有觸發

回答

相關問題