OperaとIEで奇妙な動作をするチェックボックスとJQuery

サンプルコードでは、JQueryを使用して、最後にチェックボックスをオフにしないようにしています。 FirefoxやChromeでは期待通りに動作しますが、OperaやIEでは動作しません。OperaとIEで奇妙な動作をするチェックボックスとJQuery

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #checkboxContainer label { 
      float: left; 
      clear: right; 
     } 
     #checkboxContainer input { 
      float: left; 
      clear: left; 
     } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#checkboxContainer input[type='checkbox']").change(function(evt) { 
       if ($("#checkboxContainer input[type='checkbox']:checked").length == 0) { 
        console.log("Only 1 checkbox; can't uncheck."); 
        $(evt.target).attr("checked", "checked"); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="checkboxContainer"> 
     <input type="checkbox" id="checkbox1" checked="checked"/> 
     <label for="checkbox1">1</label> 
     <input type="checkbox" id="checkbox2"/> 
     <label for="checkbox2">2</label> 
    </div> 
</body> 
</html>

ここでは何が起こっていますか？

出典

2012-01-07 Tony R

これは、 "input [type = 'checkbox']"の代わりにセレクタを "：checkbox"に変更した場合、IEとOperaで動作するようです。 jQueryのドキュメントでは、2つが同等であると述べているため、動作の違いを説明する方法がわかりません。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#checkboxContainer :checkbox").change(function(evt) { 
      if ($("#checkboxContainer :checkbox:checked").length == 0) { 
       console.log("Only 1 checkbox; can't uncheck."); 
       $(evt.target).attr("checked", "checked"); 
      } 
     }); 
    }); 
</script>

出典

2012-01-07 05:04:50 Matt

おかげマット、これは動いていないようにみえますが、私はこの問題を回避するより説明でより興味を持っています。 –

興味深いメモ...私はdivを追加し、デバッグの目的のためだけにdivを数え始めました。それによって元のセレクタが動作しました。次に、カウントへの参照を削除し、上記のコードでifの前の行のdivに静的テキストを設定します：$（ '＃debugDiv'）。text（ 'static test'）問題。まだ説明がありません - そのセレクタでカウントが正しく計算されるためにDOMを変更する必要があるようです。 – Matt

これをさらに調べていただきありがとうございます... JQueryのバグかもしれません。これは非常に基本的な機能なので、私は完全に混乱しています。 –

あなたはこのエラーなしことができます：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #checkboxContainer label { 
      float: left; 
      clear: right; 
     } 
     #checkboxContainer input { 
      float: left; 
      clear: left; 
     } 
    </style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".ceks").click(function() { 
       if(!$(".ceks:checked").length){ 
        $(this).attr("checked", "checked"); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="checkboxContainer"> 
     <input type="checkbox" class="ceks" checked="checked"/> 
     <label for="checkbox1">1</label> 
     <input type="checkbox" class="ceks"/> 
     <label for="checkbox2">2</label> 
    </div> 
</body> 
</html>

出典

2012-01-07 14:16:33 ukung

はい。 $（ "。checkboxContainer input [type = 'checkbox']：checked）に問題があるようですが、input：checkbox：checkedが動作します。 –

OperaとIEで奇妙な動作をするチェックボックスとJQuery

答えて

関連する問題