Question

我正在处理一项要求，其中我根据单选按钮选择显示字段。以下是代码 -

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

        });
    });

我无法使此代码生效。控制台中也没有错误。 FIDDLE

Answer 1

试试这个：

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

Answer 2

尝试以下

$( 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

使用.change事件代替.select

DEMO

Answer 4

请参阅演示Here。

这对你有用..

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

Answer 5

选择在这里不起作用。使用更改或单击事件。

              $( 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

尝试以下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，因此可能看起来好像没有发生任何变化

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

6 个答案: