Javascript 几个复选框和验证jQuery_Javascript_Jquery_Html_Checkbox

Javascript 几个复选框和验证jQuery

javascript jquery html checkbox

Javascript 几个复选框和验证jQuery,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我正在做一份带有多个复选框（是、否）的调查问卷，如果所有复选框都为“否”，则以下字段应为只读并禁用，但如果有任何“是”，则应为必填字段。所有问卷都在一张表格内，每个tr有两个复选框我尝试了很多事情，但我相信有人比我有更好的想法 HTML代码如下所示： <div class="questionnaire_a"> <table class="table questionnaire"> <thead> <tr&

我正在做一份带有多个复选框（是、否）的调查问卷，如果所有复选框都为“否”，则以下字段应为只读并禁用，但如果有任何“是”，则应为必填字段。所有问卷都在一张表格内，每个tr有两个复选框

我尝试了很多事情，但我相信有人比我有更好的想法

HTML代码如下所示：

<div class="questionnaire_a">
    <table class="table questionnaire">
        <thead>
            <tr>
                <th>Is required?</th>
                <th>YES</th>
                <th>NO</th>
            </tr>
        </thead>
        <tbody>
            <tr id="quest" class="quest">
                <td>Q1</td>
                <td><input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q"></td>
                <td><input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q"></td>
            </tr>
            <tr id="quest" class="quest">
                <td>Q2</td>
                <td><input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q"></td>
                <td><input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q"></td>
            </tr>
            <tr  id="quest" class="quest">
                <td>Q3</td>
                <td><input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q"></td>
                <td><input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q"></td>
            </tr>
            <tr  id="quest" class="quest">
                <td>Q4</td>
                <td><input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q"></td>
                <td><input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q"></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="fields" class="fields">
     <select class="pos" id="pos" name="pos"></select>
     <input type="number" step="1" class="len" id="len" name="len">
     <input type="number" step="1" class="he" id="he" name="he">
     <select class="perm" id="perm" name="perm"></select>
</div>

添加新组时：

var group = $('#group').clone(),
        group_fields = group.find('input, select,table, td, .questionnaire, questionnaire_a, .quest_q')

   group_fields.each(function() {
        $(this).attr('id', $(this).attr('id') + '_' + num);
        $(this).attr('name', $(this).attr('name') + '_' + num);

这是我在选中复选框时进行检查的方法，但我不知道如何知道是否有“是”或“否”，以及如何计数以使其他字段成为必填字段或可读字段

如果您有什么想法，请感谢您的帮助

以下是根据是否选中复选框启用/禁用的代码。我把生成它们作为练习，但应该非常简单，因为我演示了如何在字段上设置属性

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table questionnaire">
                <thead>
                    <tr>
                        <th>Is required?</th>
                        <th>YES</th>
                        <th>NO</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="quest" class="quest">
                        <td>Q1</td>
                        <td><input type="radio" id="ques_Q1y" value="y" class="table quest_q" name="ques_Q1"></td>
                        <td><input type="radio" id="ques_Q1n" value="n" class="table quest_q" name="ques_Q1" checked></td>
                    </tr>
                    <tr id="quest" class="quest">
                        <td>Q2</td>
                        <td><input type="radio" id="ques_Q2y" value="y" class="table quest_q" name="ques_Q2"></td>
                        <td><input type="radio" id="ques_Q2n" value="n" class="table quest_q" name="ques_Q2" checked></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q3</td>
                        <td><input type="radio" id="ques_Q3y" value="y" class="table quest_q" name="ques_Q3"></td>
                        <td><input type="radio" id="ques_Q3n" value="n" class="table quest_q" name="ques_Q3" checked></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q4</td>
                        <td><input type="radio" id="ques_Q4y" value="y" class="table quest_q" name="ques_Q4"></td>
                        <td><input type="radio" id="ques_Q4n" value="n" class="table quest_q" name="ques_Q4" checked></td>
                    </tr>
                </tbody>
            </table>

                <div id="fields" class="fields">
                     <select class="pos" id="pos" name="pos"></select>
                     <input type="number" step="1" class="len" id="len" name="len">
                     <input type="number" step="1" class="he" id="he" name="he">
                     <select class="perm" id="perm" name="perm"></select>
                </div>
  </body>

</html>



$(document).ready(function() {
  var radios = $("input[type='radio'][name^='ques_']");

  radios.change(function() {
    updateFields();
  });

  function updateFields() {
    var enabled = anyYesChecked(radios)
    enableFields(enabled);
  }

  function anyYesChecked(cbs) {
    var anyChecked = false;
    $.each(cbs, function(index, cb) {
      if (cb.value=='y' && cb.checked) anyChecked = true;
    });

    return anyChecked;
  }

  function enableFields(enabled) {
    // enble fields
    $('#pos').prop('disabled', !enabled);
    $('#len').prop('disabled', !enabled);
    $('#he').prop('disabled', !enabled);
    $('#perm').prop('disabled', !enabled);

    // make fields required
    //TODO
  }

  updateFields();
});


需要什么？
对
不
Q1
问题2
第三季度
第四季度
$（文档）.ready（函数（）{
var无线电=$（“输入[type='radio'][name^='ques_']）；
收音机。更改（函数（）{
updateFields（）；
});
函数updateFields（）{
var enabled=anyYesChecked（无线电）
启用字段（已启用）；
}
函数anyYesChecked（cbs）{
var anyChecked=false；
$。每个（cbs，函数（索引，cb）{
如果（cb.value='y'&&cb.checked）anyChecked=true；
});
返回任何已检查的项目；
}
功能启用字段（已启用）{
//恩布尔场
$（'#pos'）.prop（'disabled'，！enabled）；
$（'#len'）.prop（'disabled'，！enabled）；
$（'he'）.prop（'disabled'，！enabled）；
$（'#perm'）.prop（'disabled'，！enabled）；
//将字段设为必填字段
//待办事项
}
updateFields（）；
});

这是用于演示的plunkr：

这是根据复选框是否选中而启用/禁用的代码。我把生成它们作为练习，但应该非常简单，因为我演示了如何在字段上设置属性

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table questionnaire">
                <thead>
                    <tr>
                        <th>Is required?</th>
                        <th>YES</th>
                        <th>NO</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="quest" class="quest">
                        <td>Q1</td>
                        <td><input type="radio" id="ques_Q1y" value="y" class="table quest_q" name="ques_Q1"></td>
                        <td><input type="radio" id="ques_Q1n" value="n" class="table quest_q" name="ques_Q1" checked></td>
                    </tr>
                    <tr id="quest" class="quest">
                        <td>Q2</td>
                        <td><input type="radio" id="ques_Q2y" value="y" class="table quest_q" name="ques_Q2"></td>
                        <td><input type="radio" id="ques_Q2n" value="n" class="table quest_q" name="ques_Q2" checked></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q3</td>
                        <td><input type="radio" id="ques_Q3y" value="y" class="table quest_q" name="ques_Q3"></td>
                        <td><input type="radio" id="ques_Q3n" value="n" class="table quest_q" name="ques_Q3" checked></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q4</td>
                        <td><input type="radio" id="ques_Q4y" value="y" class="table quest_q" name="ques_Q4"></td>
                        <td><input type="radio" id="ques_Q4n" value="n" class="table quest_q" name="ques_Q4" checked></td>
                    </tr>
                </tbody>
            </table>

                <div id="fields" class="fields">
                     <select class="pos" id="pos" name="pos"></select>
                     <input type="number" step="1" class="len" id="len" name="len">
                     <input type="number" step="1" class="he" id="he" name="he">
                     <select class="perm" id="perm" name="perm"></select>
                </div>
  </body>

</html>



$(document).ready(function() {
  var radios = $("input[type='radio'][name^='ques_']");

  radios.change(function() {
    updateFields();
  });

  function updateFields() {
    var enabled = anyYesChecked(radios)
    enableFields(enabled);
  }

  function anyYesChecked(cbs) {
    var anyChecked = false;
    $.each(cbs, function(index, cb) {
      if (cb.value=='y' && cb.checked) anyChecked = true;
    });

    return anyChecked;
  }

  function enableFields(enabled) {
    // enble fields
    $('#pos').prop('disabled', !enabled);
    $('#len').prop('disabled', !enabled);
    $('#he').prop('disabled', !enabled);
    $('#perm').prop('disabled', !enabled);

    // make fields required
    //TODO
  }

  updateFields();
});


需要什么？
对
不
Q1
问题2
第三季度
第四季度
$（文档）.ready（函数（）{
var无线电=$（“输入[type='radio'][name^='ques_']）；
收音机。更改（函数（）{
updateFields（）；
});
函数updateFields（）{
var enabled=anyYesChecked（无线电）
启用字段（已启用）；
}
函数anyYesChecked（cbs）{
var anyChecked=false；
$。每个（cbs，函数（索引，cb）{
如果（cb.value='y'&&cb.checked）anyChecked=true；
});
返回任何已检查的项目；
}
功能启用字段（已启用）{
//恩布尔场
$（'#pos'）.prop（'disabled'，！enabled）；
$（'#len'）.prop（'disabled'，！enabled）；
$（'he'）.prop（'disabled'，！enabled）；
$（'#perm'）.prop（'disabled'，！enabled）；
//将字段设为必填字段
//待办事项
}
updateFields（）；
});

这是用于演示的plunkr：

也许您可以在Yes框中添加一个“Yes”类。在复选框更改的事件处理程序中，可以检查选中的“Yes”类的数量。如果该数字大于0，则激活字段div中的字段并添加所需属性

$("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
   var yes = $(".yes:checked").length;
   if(yes > 0){                              
      $("#fields").children().prop("disabled",false).prop("required",true);
   }
   else{
     $("#fields").children().prop("disabled",true).prop("required",false);
    }
});

如果希望每个表单元素的“禁用”属性以“禁用”开头，则可以对其进行硬编码

我在JSFIDLE中测试了它：

也许您可以在“是”框中添加一个“是”类。在复选框更改的事件处理程序中，可以检查选中的“Yes”类的数量。如果该数字大于0，则激活字段div中的字段并添加所需属性

$("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
   var yes = $(".yes:checked").length;
   if(yes > 0){                              
      $("#fields").children().prop("disabled",false).prop("required",true);
   }
   else{
     $("#fields").children().prop("disabled",true).prop("required",false);
    }
});

如果希望每个表单元素的“禁用”属性以“禁用”开头，则可以对其进行硬编码

我在JSFIDLE中测试了它：

尝试利用

.index（）

，

数组.prototype。一些

var input=$（“input[type=checkbox][name^=ques.]：checkbox”）
，fields=$（“#fields”）。查找（“输入，选择”）；
输入。更改（功能（e）{
var res=Array.prototype.some.call（输入，函数（elem，idx）{
返回$（elem）.parent（）.index（）==2&&elem.checked
});
log（$（this.parent（）.index（），res）；
如果（res）{
领域
.每个（功能（i，el）{
el.disabled=真；
el.readonly=true；
el.required=假；
})
}否则{
领域
.每个（功能（i，el）{
el.disabled=假；
el.readonly=false；
el.required=真；
})
};
});

需要什么？
对
不