0

ユーザーが 3 つ以上のチェックボックスを選択できないようにしたいのですが、データはテーブルから取得されます。

つまり、テーブルから取得した 5 つのチェックボックスがありますが、ユーザーが制限を超えるとスクリプトが機能しません。これが私のコードです。

<script type="text/javascript">
$('input[id="fruits"]').click(function(event) {
if (this.checked && $('input:checked').length > 3) {
event.preventDefault();
alert('You\'re not allowed to choose more than 3 boxes');
}
});
</script>

<?php
if ($result = $mysqli->query("SELECT fruitId, fruitname, fruitDes  FROM tbl_fruit")) {
if ($result->num_rows > 0)
{
echo "<table border='0' cellpadding='10'>";
echo "<tr><th>ID</th> <th>Name</th <th>Description</th> <th></th> </tr>";

while ($row = $result->fetch_object())
{
echo "<tr>";
echo "<td>" . $row->fruitId . "</td>";
echo "<td>" . $row->fruitname ." </td>";
echo "<td>" . $row->fruitDes ." </td>";
echo "<td><input type ='checkbox' name='fruits[]' value='" . $row->studId ."' id='fruits'></td>";
echo "</tr>";
}
echo "</table>"; } else {
echo "No results to display!";
}
}
else {
echo "Error: " . $mysqli->error;
}
$mysqli->close();
 ?>
4

4 に答える 4

0

これを見てください、うまくいくかもしれません;）

チェックボックスの量を制限する

于 2013-03-20T03:54:56.653 に答える
0

スクリプト ドキュメントの readt 関数を配置します。

>     > $(document).ready(function() {
>     > $('input[id="fruits"]').click(function(event) { if (this.checked &&
>     > $('input:checked').length > 3) { event.preventDefault();
>     > alert('You\'re not allowed to choose more than 3 boxes'); } }); });
于 2013-03-20T04:19:06.397 に答える
0

本当にやりたい場合は、最初にチェックされている数を数え、それが最大数である場合は、チェックされていないものを無効にする必要があります。カウントが数より少ない場合は、すべてのチェックボックスを有効にします。

<script type="text/javascript">

function toggleCheckboxes(name, num) {

    var checkedCount = 0;
    var boxes = document.getElementsByName(name);
    var box, disable, i;

    // If there aren't enough boxes, forget it
    if (boxes.length < num) return;

    // Count how many are checked
    for (var i=0, iLen=boxes.length; i<iLen; i++) {
      checkedCount += boxes[i].checked? 1 : 0;
    }

    // Work out if need to disable any
    disable = !!(checkedCount >= num); 

    // Only disable those that aren't checked
    // If fewer than num checked, enable them all
    for (i=0; i<iLen; i++) {
      box = boxes[i];
      box.disabled = box.checked? false : disable;
    }
}

// setTimeout is used so that if click comes from reset, the form is
// reset before listener runs
window.onload = function() {
  document.forms[0].onclick = function() {
    setTimeout(function(){toggleCheckboxes('fruits[]', 3)},10);
  }
}

</script>

<form>
  <input type="checkbox" name="fruits[]" value="apple">Apple<br>
  <input type="checkbox" name="fruits[]" value="orange">Orange<br>
  <input type="checkbox" name="fruits[]" value="pear">Pear<br>
  <input type="checkbox" name="fruits[]" value="cherry">Cherry<br>
  <input type="checkbox" name="fruits[]" value="plum">Plum<br>
  <input type="reset"><br>
</form>
于 2013-03-21T03:25:08.890 に答える
0

入力の前にスクリプトを発行しているため、スクリプトはバインドするものを見つけられません。の内容をラップする<script>か$(function () { ... });、スクリプトを入力要素の下に移動します。

于 2013-03-20T03:58:36.997 に答える