Question

我需要添加＆＃34;禁用＆＃34;基于实际浏览器宽度的字段类的状态。

以下解决方案效果很好但您需要触摸浏览器宽度才能在页面重新加载后使其正常工作。

<script>
$(window).resize(function(){

        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }
        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
});
</script>

是否有可能转换此脚本，以便每次页面重新加载后它都会启动？

Answer 1

使用$(document).ready()代替$(window).resize()。

<script>
    $(document).ready(function(){
        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }

        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
    });
</script>

这只会在加载页面时运行一次。

如果您不使用jQuery，则可以改为使用window.onload。

Read more about it here.

<script>
    window.onload = function(){
        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }

        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
    }
</script>

Answer 2

将其放在标题中

 <script>
     $(window).resize(function(){
     $('.mobile-hidden').prop('disabled', true);
     }
 </script>

在特定窗口宽度上运行特定脚本

2 个答案: