[英]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.