无法根据jQuery中的单选按钮选择隐藏或显示div

Question

I'm working on a requirement, where in I display the fields based on radio button selection. Below is the code -

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

        });
    });

I'm unable to make this code work. There is no error in console as well. FIDDLE

Answer 1

Try this:

$("input[name=someRadioGroup]:radio").change(function () {
//Your code
});

Answer 2

try below

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

            });
        });

Answer 3

Use .change event instead of .select

DEMO

Answer 4

See the demo Here .

This should work for you..

$("#selection :input[name=selection]").change(function () {
    var radioId = $(this).attr("id");
    if(radioId=='selection_0'){
    }
    else{
    }
});

Answer 5

select will not work here. Use change or click events.

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

Answer 6

Try the following JQuery code

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

    }});
});

please note that the div's recorded_messages and text_to_speech have same html so it may appear as if there is no change happening