jQuery - 使用复选框显示/隐藏表单标签和字段以及禁用字段？答案

【问题标题】：jQuery - Show/Hide Form Label & Field plus Disable Field using checkbox?jQuery - 使用复选框显示/隐藏表单标签和字段以及禁用字段？
【发布时间】：2015-01-20 04:11:50
【问题描述】：

我需要显示和隐藏基于复选框的表单（默认关闭），使表单输入和标签隐藏，而且不是必需的。现在，我只是想解决显示问题。我知道我可以使用如下代码禁用表单：

$(document).ready(function() {

   $('#00NU00000049YHZ').change(function(){
   $('#company').prop('disabled' $('#companylbl').hide();, !$(this).is(':checked' $('#companylbl').show()));
   });

});

</script>

我希望公司字段通过复选框隐藏/显示的 HTML 表单示例，并在以后验证期间根据复选框的状态将其设置为必需或不需要。

<!DOCTYPE html>
<html lang="en">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> </META>
<HEAD>
</HEAD>
<BODY>

<form id="w2lForm" 

<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>

<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>

This is for a Company:<input  id="00NU00000049YHZ" name="00NU00000049YHZ" type="checkbox" value="0"  /><br>

<label id="cmpnylbl" for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>

<label for="street">Address</label><textarea id="street" name="street"></textarea><br>

<input type="submit" name="submit">

</form>

</BODY>
</HTML>

我正在使用 jQuery 1.11.1。在许多其他事情中，我尝试在公司标签和输入字段周围放置一个 DIV 标记，然后在可见性为“可见”或“隐藏”的情况下执行添加/删除类，但这似乎不起作用隐藏“公司”的文本以及输入文本字段。有人可以告诉我我需要做什么吗？

【问题讨论】：

$('#company').prop("disabled" $('#companylbl').hide();, !$(this).is(':checked' $('#companylbl').show())); 不确定这会如何工作，肯定只是在控制台中抛出语法错误？
该 JS 代码中有一些奇怪的东西。你确定你抄对了吗？
@gillesc 这是我一直在编辑的地方出现的复制粘贴错误。我在发布后立即修复了它。
它仍然是完全一样的，并且通过接受的答案清楚地表明 JS 是错误的。
现已修复。有两个地方我用双引号而不是单引号。显然，在粘贴了我一直在使用的那个版本的代码之后，我只修复了其中一个。感谢您的勤奋和对细节的关注。

标签： jquery forms

【解决方案1】：

更好的解决方案http://jsfiddle.net/rrfr9oqv/：

<label id="cmpnylbl" for="company">Company<input  id="company" maxlength="40" name="company" size="20" type="text" /></label>


$(document).ready(function() {
    var $checkbox = $('#00NU00000049YHZ'),
        $companyLabel = $('#cmpnylbl'),
        $companyInput = $('#company');

    function toggleCompany(condition) {
        if (condition === true) {
            $companyLabel.show();
        } else {
            $companyLabel.hide();
            $companyInput.val('');    // clear
        }
        $companyInput.prop('disabled', !condition)
    }

    toggleCompany($checkbox.is(':checked'));

    $checkbox.change(function() {
        toggleCompany(this.checked);
    });
});

【讨论】：

您的解决方案更加完整，当我添加required 以根据是否显示公司进行验证时，它会很有帮助。谢谢。

【解决方案2】：

jsfiddle => http://jsfiddle.net/793g5mxb/13/

$('#company_area').hide();
$('#00NU00000049YHZ').change(function(){
     $('#company_area').toggle();
});

【讨论】：

一旦我移动了<span> 标签，让它刚好包围了公司，这几乎奏效了。有没有办法让您的示例在默认情况下隐藏公司字段且复选框设置为关闭的情况下工作？

【解决方案3】：

试试这个（已编辑）：

http://jsfiddle.net/hajq0nfa/2/

$(document).ready(function() {
   $('#00NU00000049YHZ').change(function(){
       var checked = $(this).is(':checked');
       $('#company_information').toggle(checked);
       $('#company').prop('disabled', !checked)
   }).change();
});

【讨论】：

“公司”会根据需要消失，但仍会显示禁用的输入文本区域。有没有办法隐藏文本区域？虽然从我所在的地方取得了很大的进步。 :)
已更新。禁用输入框并隐藏所有内容。
Toggle 方法不会像你那样接受检查，最好不要传递任何参数。此外，您的禁用字段无法按预期工作。
根据 jquery 文档：api.jquery.com/toggle。如果我禁用的字段不起作用，那你为什么要复制我的代码？

【解决方案4】：

我认为隐藏输入字段和标签以及在未选中时清除输入框的值是有意义的。

来自@clint-powell 的示例：

<!-- wrap the input inside the label -->
<label id="cmpnylbl" for="company">Company<input  id="company" maxlength="40" name="company" size="20" type="text" /></label>


$(document).ready(function() {

    // don't show by default
   $('#cmpnylbl').hide();

   $('#00NU00000049YHZ').change(function(){     
       var checked = this.checked;       

       if (checked) {
           $('#cmpnylbl').show();
       } else {
           $('#cmpnylbl').hide();
           $('#company').val('');    // clear
       }

       $('#company').prop('disabled', !checked)

   });

});

【讨论】：