javascript - JavaScript (jQuery) チェックボックスを無効にする問題

Question

さて、ちょっと問題があります。私はいくつかのコードを持っています.JSは動作します(少なくとも非CSS変更バージョンでは)が、CSS変更バージョンでは失敗します. CSSの実装で何がうまくいかなかったのかを理解するために誰かが私に助けを貸してくれるかどうか疑問に思っています...

私が望んでいるのは、最初の 4 つのチェックボックスのいずれかであり、チェックされている場合は、他のすべてを無効にします。ただし、他のチェックボックス (番号 5 以上) のいずれかがチェックされている場合、無効になるものはありません (もちろん、誰かが最初の 4 つのうちの 1 つをチェックしない限り)。

私のJavaScript：

<script type="text/javascript"> 
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
    var $this = $(this);    
    $inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $inputs.not(this).prop('checked',false);
    }
});
$inputs2.change(function(){
    var $this = $(this);    
    $inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));        
    if($this.index() < 4 && this.checked){
        $inputs2.not(this).prop('checked',false);
    }
});
});

最初の部門:

<div id="test" style="float:left; width:50%">
  <table border="0" cellpadding="0" cellspacing="0">
   <tr><td style="font-size:3px">&nbsp;</td></tr>
   <tr>
    <p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
      <td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
      <label for="1" class="css-label">1</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
      <label for="2" class="css-label">2</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
      <label for="3" class="css-label">3</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
      <label for="4" class="css-label">4</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
      <label for="5" class="css-label">5</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
      <label for="6" class="css-label">6</label></td></tr>
  </table>
</div>

私のCSS、必要に応じて：

<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>

問題は次のとおりです。以下は動作しますが、以下は後で CSS で変更されたもので、何が問題なのかわかりません。

機能するもの:

<div id='test'>
    <input type="checkbox" name="check1" value="1" id="check1" >first
    <input type="checkbox" name="check2" value="1" id="check2" >second
    <input type="checkbox" name="check3" value="1" id="check3" >third
    <input type="checkbox" name="check4" value="1" id="check4" >fourth
    <input type="checkbox" name="check5" value="1" id="check5" >fifth
    <input type="checkbox" name="check6" value="1" id="check6" >sixth
    <input type="checkbox" name="check7" value="1" id="check7" >seventh
    <input type="checkbox" name="check8" value="1" id="check8" >eight
</div>

上記の非CSSが適切に機能し、CSSに関係なくすべてのチェックボックスを（適切な場合に）無効にするため、機能しないコードと同じdivに機能するコードを追加すると、さらに奇妙になりますが、 CSS がチェックされ、すべて無効になっています。

<div id="test" style="float:left; width:50%">
  <table border="0" cellpadding="0" cellspacing="0">
   <tr><td style="font-size:3px">&nbsp;</td></tr>
   <tr>
    <p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
      <td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
      <label for="1" class="css-label">1</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
      <label for="2" class="css-label">2</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
      <label for="3" class="css-label">3</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
      <label for="4" class="css-label">4</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
      <label for="5" class="css-label">5</label></td></tr><tr>
      <td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
      <label for="6" class="css-label">6</label></td></tr>      <input type="checkbox" name="check1" value="1" id="check1" >first
    <input type="checkbox" name="check2" value="1" id="check2" >second
    <input type="checkbox" name="check3" value="1" id="check3" >third
    <input type="checkbox" name="check4" value="1" id="check4" >fourth
    <input type="checkbox" name="check5" value="1" id="check5" >fifth
    <input type="checkbox" name="check6" value="1" id="check6" >sixth
    <input type="checkbox" name="check7" value="1" id="check7" >seventh
    <input type="checkbox" name="check8" value="1" id="check8" >eight
  </table>
</div>

score 0 · Accepted Answer

入力フィールドの ID を変更します。ID は数字で始めることはできません

<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />

JS で問題が発生する可能性があります。私は何かを試してみます

<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />

score 0 · Accepted Answer

.index()兄弟要素に相対的なインデックスを返します。あなたの作業例では、 an の兄弟は<input>他の入力です。機能しない例では、唯一の兄弟は<label>要素です。

あなたの「奇妙な」例では、すべての入力が再び兄弟です。

とにかくそれを機能させるために、次を使用できます.index(element)：

$inputs.index($this)

$thisこれは、jquery 入力コレクション内の入力のインデックスを返します$inputs。ワーキングフィドル。

javascript - JavaScript (jQuery) チェックボックスを無効にする問題

2 に答える 2

Related

Reference