フォーム ZURB ファンデーションに問題があります。確かに、フォームは正しく表示されますが、選択できません。
これが私のコードです: 最初の形式ではラジオが機能しますが、2 番目の形式では機能しないことがわかります。
この問題を解決するために多くのことを試みましたが、問題がどこにあるのかわかりません。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/foundation.css"/>
<link rel="stylesheet" href="../css/normalize.css"/>
<script src="../js/vendor/custom.modernizr.js"></script>
<title></title>
</head>
<body>
<div class="row">
<form class="custom">
<div class="row">
<div class="large-4 columns">
<label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
<label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
</div>
</div>
</form>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title><a href="#panel1">Section 1</a></p>
<div class="content" data-section-content>
<form class="custom">
<div class="row">
<div class="large-4 columns">
<label for="radio2"><input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
<label for="radio2"><input name="radio2" type="radio" id="radio2" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
</div>
</div>
</form>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Section 2</a></p>
<div class="content" data-section-content>
<p>section2</p>
</div>
</section>
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation/foundation.js"></script>
<script src="../js/foundation/foundation.forms.js"></script>
<script src="../js/foundation/foundation.section.js"></script>
<script src="../js/vendor/zepto.js"></script>
<script>
$(document).foundation();
</script>
<body>