[英]Unable to hide or show div based on radio button selection in jQuery
我正在處理一個需求,在其中顯示基於單選按鈕選擇的字段。 下面是代碼-
$( document ).ready(function() {
$('#selection_0').select(function () {
$('#text_to_speech').show();
$('#recorded_messages').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
});
$('#selection_1').select(function () {
$('#recorded_messages').show();
$('#text_to_speech').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
});
});
我無法使此代碼正常工作。 控制台中也沒有錯誤。 小提琴
嘗試這個:
$("input[name=someRadioGroup]:radio").change(function () {
//Your code
});
嘗試下面
$( document ).ready(function() {
$('#selection_0').click(function () {
alert(4)
$('#text_to_speech').show();
$('#recorded_messages').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
});
$('#selection_1').click(function () {
alert(7)
$('#recorded_messages').show();
$('#text_to_speech').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
});
});
使用.change
事件而不是.select
在此處查看演示。
這應該為您工作。
$("#selection :input[name=selection]").change(function () {
var radioId = $(this).attr("id");
if(radioId=='selection_0'){
}
else{
}
});
選擇在這里不起作用。 使用更改或點擊事件。
$( document ).ready(function() {
$('#selection_0').click(function () {
if ($('#selection_0').is(':checked')) {
$('#text_to_speech').show();
$('#recorded_messages').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
}
});
$('#selection_1').click(function () {
if ($('#selection_1').is(':checked')) {
$('#recorded_messages').show();
$('#text_to_speech').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)
});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)
});
}
});
});
嘗試以下JQuery代碼
$(document).ready(function(){
$("input[name='selection']").on('change', function () {
if ($("input[name='selection']:checked").val() == 0) {
$('#text_to_speech').show();
$('#recorded_messages').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
}else{
$('#recorded_messages').show();
$('#text_to_speech').hide();
$('#recorded_messages').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', false)});
$('#text_to_speech').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true)});
}});
});
請注意,div的recorded_messages和text_to_speech具有相同的html,因此好像沒有變化一樣顯示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.