2

テーブルがあり、セルを押すと色が変わります。

HTML

<table id="hours">
  <tr>
    <td>
      <div>
        <input type="checkbox" id="checkHourR01C01" />
        <label for="checkHourR01C01"> </label>
      </div>
    </td>
  ...

CSS

table#hours input[type=checkbox] { visibility: hidden; }
table#hours input[type=checkbox]:checked  + label { background-color: blue; }

これは完璧に機能しました。問題は、私が ASP MVC 3 を使用していて、Html.CheckboxFor が別の入力型非表示を追加していることです。したがって、私のhtml構造は次のようになります。

HTML

<table id="hours">
  <tr>
    <td>
      <div>
        <input data-val="true" data-val-required="The Selected field is required." id="Days_0__Hours_0__Selected" name="Days[0].Hours[0].Selected" type="checkbox" value="true" />
        <input name="Days[0].Hours[0].Selected" type="hidden" value="false" />
        <label for="Days_0__Hours_0__Selected"> </label>
      </div>
    </td>
  ...

だから今は次のようになります：

table#hours input[type=checkbox]:checked input[type=hidden] + label { background-color: blue; }

しかし、これはうまくいきません。CSSで修正する方法はありますか、それともjqueryに変更する必要がありますか?

4

2 に答える 2

2

~ 一般的な兄弟セレクターを試してください:

table#hours input[type=checkbox]:checked input[type=hidden] ~ label { background-color: blue; }
于 2013-04-17T17:30:25.883 に答える
1

labelはまだ兄弟であり、checkbox隣接していません。~の代わりに使用する以外は、オリジナルの CSS を試してください+。

table#hours input[type=checkbox]:checked ~ label { background-color: blue; }
于 2013-04-17T17:31:03.700 に答える