jQuery - 使用複選框顯示/隱藏表單標籤和字段以及禁用字段？

我需要根據複選框（默認關閉）顯示和隱藏表單，使表單輸入和標籤隱藏，並且不需要。現在，我只是想解決顯示問題。我知道我可以用代碼禁用的形式是這樣的：jQuery - 使用複選框顯示/隱藏表單標籤和字段以及禁用字段？

$(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標籤，然後做一個添加/刪除類，其中可見性是「可見的」或「隱藏的」，但這似乎不起作用以隱藏「公司」的文本以及輸入文本字段。有人能告訴我我需要做什麼嗎？

來源

2014-11-21 crmprogdev

'$（'＃公司）丙（「禁用」 $（ '＃companylbl' ）.hide（）;！$（this）.is（'：checked'$（'＃companylbl'）。show（）））;'不知道這是如何工作的，當然它只是在控制檯中引發語法錯誤？ – GillesC 2014-11-21 22:05:24

在JS代碼中有一些時髦的東西正在進行。你確定你把它複製了嗎？ – 2014-11-21 22:10:22

@gillesc這是從我編輯的地方複製粘貼錯誤。發佈後我立即修復它。 – crmprogdev 2014-11-21 22:17:10

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

來源

2014-11-22 01:37:49

你的是一個更完整的解決方案，稍後當我根據公司是否顯示進行驗證添加'required'時將會有所幫助。謝謝。 – crmprogdev 2014-11-22 12:38:21

試一下這個（編輯）：

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

來源

2014-11-21 22:09:02

「公司」按需要消失，但禁用的輸入文本區域仍顯示。有沒有辦法隱藏文本區域？雖然從我所在的地方取得了很大的進步。 :) – crmprogdev 2014-11-21 22:19:42

更新。禁用輸入框以及隱藏所有內容。 – 2014-11-21 22:35:09

切換方法不會像你在那裏接受檢查，更好地傳遞沒有參數。此外，您的禁用字段無法按預期工作。 – 2014-11-21 22:44:00

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

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

來源

2014-11-21 22:18:22

一旦我將「」標籤移動到公司周圍，那幾乎可以工作。有沒有辦法讓您的示例工作，公司字段默認情況下會隱藏，複選框設置爲關閉？ – crmprogdev 2014-11-21 22:30:18

@crmprogdev更新jsfiddle – 2014-11-21 22:33:06

我覺得很有道理隱藏輸入字段以及標籤和也在未選中時清除輸入框的值。

從@克林特 - 鮑威爾的例子分叉：

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

    }); 

});

來源

2014-11-21 22:46:14

jQuery - 使用複選框顯示/隱藏表單標籤和字段以及禁用字段？

回答

相關問題