Question

我需要根据复选框显示和隐藏表单（默认关闭），使表单输入和它的标签隐藏，加上不需要。现在，我只想解决显示问题。我知道我可以使用以下代码禁用表单：

$(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标签，然后进行一个添加/删除类，其中可见性是＆＃34;可见＆＃34;或者＆＃34;隐藏＆＃34;，但这似乎无法隐藏＆＃34;公司＆＃34;以及输入文本字段。有人可以告诉我我需要做什么吗？

Answer 1

jsfiddle =＆gt; http://jsfiddle.net/793g5mxb/13/

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

Answer 2

更好的解决方案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);
    });
});

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

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

   });

});

jQuery - 显示/隐藏表单标签＆amp;字段加禁用字段使用复选框？

4 个答案: