Question

我有这样的单选按钮 -

<input type="radio" class="radiofilter" name="btype" id="btype1" checked='checked' autocomplete="off"><label for="btype1">All</label>
<input type="radio" class="radiofilter" name="btype" id="btype2" autocomplete="off"><label for="btype2">Option 1</label>
<input type="radio" class="radiofilter" name="btype" id="btype3" autocomplete="off" ><label for="btype3">Option 2</label>

我有一个事件监听器，一旦选择了单选按钮选项就会激活脚本 -

$('input.radiofilter:radio').change(
                        function(){
                               if($('#btype1').is(':checked')) {
                                 z=1;
                               } else if($('#btype2').is(':checked')) {
                                 z=2;
                               } else if($('#btype3').is(':checked')) {
                                 z=3;
                               }
                               process(z);
                        });

功能进程（）需要几秒钟的时间来处理，并且一旦过程完成（几秒钟后）选择单选按钮就会让用户不确定是否单击单选按钮是否发生了任何变化。 / p>

我想要做的是在用户点击后立即显示微调器叠加层，并在完成此过程后隐藏叠加层

我认为这应该很容易，并做了以下事情 -

$('input.radiofilter:radio').change(
                        function(){
                               if($('#btype1').is(':checked')) {
                                 z=1;
                               } else if($('#btype2').is(':checked')) {
                                 z=2;
                               } else if($('#btype3').is(':checked')) {
                                 z=3;
                               }
                               $(".radiofilter").attr('disabled',true);
                               $("#loader").show();
                               process(z);
                               $("#loader").hide();
                               $(".radiofilter").attr('disabled',false);
                        });

在调用process（）

之前和之后添加.show（）和.hide（）

但由于某些我无法理解的原因，它无效。这样做的最佳方式是什么？

Answer 1

尝试使用＆＃34;点击＆＃34;事件，你可以做得更简单：

jQuery('input.radiofilter').on('click', function(){
    if(jQuery(this).is(':checked')){
        z = jQuery(this).prop('id').replace('btype',''); // if doesnt work try just changing prop to attr (it depends on the jQuery version you are using)
    }
    $("#loader").show();
    process(z);
    // this one have to be added on the end of the proccess function as a callback$("#loader").hide();
});

希望对您有所帮助，如果需要更多帮助，只需询问或发送消息。

处理时禁用单选按钮

1 个答案: