Question

我正在做一个带有几个复选框的调查问卷（是，否），如果所有都是'no'，则下面的字段应该是只读和禁用的，但如果有任何“是”，则应该需要这些字段。所有调查问卷都在一个表格内，每个调查表都有两个复选框。

我正在尝试很多事情，但我确信有人比我有更好的想法。

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>

我想让下面的字段（输入和选择）可读或需要，取决于复选框。更改复选框时，我的Jquery脚本处于活动状态，如下所示：

$("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
     //Code
});

当我添加新组时：

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);

这是我检查复选框何时被选中的方式，但我不知道如何知道是否存在是或否以及如何计算它以使其他字段成为必需或可读。

如果您有任何想法，请感谢您的帮助

Answer 1

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

<!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();
});

以下是用于演示目的的插件：http://plnkr.co/edit/vYGCrEr4WpTA7b4FdBSq?p=preview

Answer 2

也许你可以添加＆＃34;是＆＃34;类到yes框。在复选框更改的事件处理程序内，您可以检查＆＃34;是＆＃34;的数量。课程检查。如果该数字大于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);
    }
});

如果您希望它们从禁用状态开始，您可以对每个表单元素上的disabled属性进行硬编码。

我在jsfiddle中测试过它： https://jsfiddle.net/seattaball/9hpc73t1/1/

Answer 3

尝试使用.index()，Array.prototype.some

var input = $("input[type=checkbox][name^=ques_]:checkbox")
, fields = $("#fields").find("input, select");

input.change(function(e) {
  var res = Array.prototype.some.call(input, function(elem, idx) {
    return $(elem).parent().index() === 2 && elem.checked
  });
  console.log($(this).parent().index(), res);
  if (res) {
    fields
    .each(function(i, el) {
      el.disabled = true;
      el.readonly = true;
      el.required = false;
    })
  } else {
    fields
    .each(function(i, el) {
      el.disabled = false;
      el.readonly = false;
      el.required = true;
    })
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<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 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>

几个复选框和验证jQuery

3 个答案: