-3

jQueryでチェックボックスを扱うという概念には比較的慣れていません。同じ名前のチェックボックスが 3 つあります。ここで、最初のチェックボックスのみの選択に応じて、いくつかの条件を適用したいと考えています。参考までに、私のHTMLコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body> 
<table>
  <tr>
    <td>
      <input type="checkbox" id="users"  value="users"/>Users 
    </td>
    <td>
      <input type="checkbox" id="upload_from_file" value="upload_from_file"/>Upload From File
    </td>
    <td>
      <input type="checkbox" id="copy_paste_from_excel" value="copy_paste_from_excel"/>Copy paste from excel
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <h4>Users</h4>
        <input type="checkbox" class="user_checkbox" name="user_checkbox" id="all_users" value="all_users"/>all users &nbsp;&nbsp;
        <input type="checkbox" class="user_checkbox" name="user_checkbox" id="register_users" value="register_users"/>Register users &nbsp;&nbsp;
        <input type="checkbox" class="user_checkbox" name="user_checkbox" id="package_expired" value="package_expired"/>Package expired &nbsp;&nbsp;
        <input type="checkbox" class="user_checkbox" name="user_checkbox" id="inactive_from_last_month" value="inactive_from_last_month"/>Inactive from last month
    </td>
  </tr> 
</table>
</body>
</html>

私の要件は、ユーザーが値を持つチェックボックスをチェックするとき、値を持つ"users"チェックボックスのグループから少なくとも 1 つのチェックボックスを選択する必要があることです ( "register_users"、"package_expired"、"inactive_from_last_month")。

もう 1 つの条件は、ユーザーが値を持つチェックボックスを選択したときにall_users、同じグループの他のすべてのチェックボックス、つまり値 ( "register_users"、"package_expired"、"inactive_from_last_month") を持つチェックボックスを無効にすることです。

もう1つの条件は、ユーザーがこれらのチェックボックスのいずれかを選択したときに、チェックボックス"all_users"を無効にする必要があることです。

jQueryを使用してこの機能を実現するのを手伝ってくれる人はいますか? 前もって感謝します。上記のコードでどこかが間違っている場合は、コードを修正できます。UIのスクリーンショットも添付しました。

ここに画像の説明を入力

4

1 に答える 1

0

jQuery ライブラリがまだ含まれていない場合は、ファイルに含める必要があるだけです。次に、以下のスクリプトを記述して、必要な機能を機能させます。

<script type="text/javascript">$("#inactive_from_last_month" ).is(":checked")
$(function(){
  $(".user_checkbox").click(function(){ 
    if($("#all_users" ).is(":checked")) {
      $("#register_users").removeAttr("checked");
      $("#package_expired").removeAttr("checked");
      $("#inactive_from_last_month").removeAttr("checked");
    } else if ($("#register_users" ).is(":checked") || $("#package_expired" ).is(":checked") || $("#inactive_from_last_month" ).is(":checked")) {
      $("#all_users").removeAttr("checked"); }
    });
});
</script>
于 2013-07-31T12:45:21.687 に答える