勾选复选框后的必填字段答案

【问题标题】：Required field after checkbox is marked勾选复选框后的必填字段
【发布时间】：2013-03-29 19:11:43
【问题描述】：

我对 JavScript 很陌生，我正在尝试创建一个表单，该表单需要在标记复选框后将信息输入到字段中，方法是切换所需的类。我已经尝试了两天，如果选中“体育馆”框，则无法将“开始日期”设为必填字段。任何帮助都会很棒。

这是我目前所拥有的：

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript">    

    $(document).ready(function(){
        $("#gym").change(function(){              
            $("#togg1").toggle(this.checked);
            $("#startDate").toggleClass("required");
            $("#endDate").toggleClass("required");
            $("#startTime").toggleClass("required");
            $("#endTime").toggleClass("required");

    if(this.checked){
           $("#startDate").attr('required','required');
           $("#endDate").attr('required','required');
           $("#startTime").attr('required','required');
           $("#endTime").attr('required','required');
      }
      else{
           $("#startDate").removeAttr('required')
           $("#endDate").removeAttr('required')
           $("#startTime").removeAttr('required')
           $("#endTime").removeAttr('required')
      }

        });
    });

    </script>


    </head>
    <body>


    <div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;">
    <form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain">
    <input name="orgid" type="hidden" value="000001" />
    <input name="retURL" type="hidden" value="#" />
    <label for="company">* Agency Requesting Facility:</label>
    <br />
    <input id="company" required="required" maxlength="50" name="company" size="50" type="text" />
    <br />
    <br />
    <label for="name">* Agency Contact:</label>
    <br />
    <input id="name" required="required" maxlength="50" name="name" size="50" type="text" />
    <br />
    <br />
    <label for="phone">* Contact Phone Number:</label>
    <br />
    <input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" />
    <br />
    <br />
    <br />Courses offered
    <br />

<input id="gym" name="gym" type="checkbox" value="1" />Gymnasium
    <br />
    <span id="togg1" style="display:none">
            <span id="togg2" style="display:inline">
                <lable for="startDate">* Start Date:</lable>
                    <input id="startDate" maxlength="10" name="startDate" size="10" />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="endDate">* End Date:</lable>
                    <input id="endDate" maxlength="10" name="endDate" size="10" /><br /><br />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="startTime">* Start Time:</lable>
                    <input for="startTime" maxlength="7" name="startTime" size="7" />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="endTime">* End Time:</lable>
                    <input for="endTime" maxlength="7" mane="endTime" size="7" /><br />
            </span>
    </span>

    <br />
    <br />
    <label for="description">Comments:</label>
    <br />
    <textarea name="description" cols="40" rows="5"></textarea>
    <br />
    <br />* denotes required fields
    <br />
    <input type="submit" name="submit" id="submit" value="SUBMIT" />
</form>
</div>
</body>
</html>

【问题讨论】：

我已经编辑了我的答案并给出了一个 jsfiddle，我认为解决方案就在那里。

标签： javascript html forms checkbox

【解决方案1】：

您忘记将“必需”属性添加到“开始日期”

$(document).ready(function(){
   $("#gym").change(function(){              
      $("#togg1").toggle(this.checked);
      $("#startDate").toggleClass("required");

      if(this.checked){
           $("#startDate").attr('required','required');
      }else{
           $("#startDate").removeAttr('required')
      }

   });
});

【讨论】：

这很好用。我已经更改了我的初始帖子以反映这些更改。我正在尝试将其实现为 4 个字段，但时间字段不起作用。你能告诉我我做错了什么吗？
您的原始问题已得到解答。这是一个全新的问题。在这种情况下，将其作为单独的问题发布。 . 'id' 的问题对于所有输入元素都是相同的。阅读一些关于 jquery 选择器如何工作的内容。
哦，我将时间输入设置为“for”而不是“id”。非常感谢您的帮助。

【解决方案2】：

您在“onSubmit”中调用了“必需”函数。这不是必要和错误的，因为“必需”功能不存在。

然后，您必须添加以下行：

$("#serviceForm").validate();

在“$(document).ready”调用中，以便在 DOM 加载后执行。

这里有一个例子说明它是如何工作的：

http://jsfiddle.net/4rscN/

我假设您使用以下插件： http://docs.jquery.com/Plugins/Validation

如果没有，你必须添加它。

对于验证插件，我认为您必须使用必需的类，而不是必需的属性。您将所需的类与所需的属性混合在一起，这是您可以在 HTML5 中使用的属性，但始终要考虑到并非所有浏览器都支持它。

关于这个的一个很好的参考：

http://caniuse.com/#search=required

【讨论】：

感谢您的回答。我无法让它工作，但将来会使用它。