在Laravel 5.8中禁用按钮

问题描述 投票：0回答：2

我在laravel 5.8中使用一个输入和输出日志,我需要当用户点击 "注册输入按钮 "时,它被停用,而 "注册退出按钮 "被激活. 但是我不知道怎么做, 我是Laravel的新手.

我需要激活和停用的按钮分别是这样的

<li class="nav-item">
        <a class="nav-link {{ setActive('Input_time.*') }}"
            href="{{ route('Input_time.index') }}"
            >@lang('Check in')
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link {{ setActive('Departure_time.*') }}"
            href="{{ route('Departure_time.index') }}"
            >@lang('Check out')
        </a>
    </li>
laravel
2个回答
0
投票

我把这个添加到我的 "导航 "文件，因为按钮是在导航栏。

<li class="nav-item">
        <a class="nav-link check_in {{ setActive('Input_time.*') }}"
            href="{{ route('Input_time.index') }}"
            >@lang('Check in')
        </a>
    </li>

    <li class="nav-item d-none">
        <a class="nav-link check_out {{ setActive('Departure_time.*') }}"
            href="{{ route('Departure_time.index') }}"
            >@lang('Check out')
        </a>
    </li>

这个是连接视图的文件。

<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('/js/app.js') }}" defer></script>

<body>
    <header>
        <div>
            @include('partials.nav')
        </div>
    </header>
</body>

这个加到javascript文件里

$('.check_in').on('click', function() {
  $(this).closest('li').addClass('d-none');
  $('.check_out').closest('li').removeClass('d-none')
});

$('.check_out').on('click', function() {
  $(this).closest('li').addClass('d-none');
  $('.check_in').closest('li').removeClass('d-none')
});

但它什么都没有做

0
投票

这里是一个简单的片段，其余的你最好知道你想要什么。你不需要删除你的laravel blade语法。我已经删除了，只是为了测试目的。

答复已更新 检查这是否是你想要的

$('.check_in').on('click', function() {
  $(this).css({
    //"pointer-events": "none",
    "cursor": "no-drop"
  });
  $('.check_out').css({
    //"pointer-events": "",
    "cursor": ""
  });
  
  //$(this).closest('li').addClass('d-none');
  //$('.check_out').closest('li').removeClass('d-none');
});

$('.check_out').on('click', function() {
  $(this).css({
    //"pointer-events": "none",
    "cursor": "no-drop"
  });
  $('.check_in').css({
    //"pointer-events": "",
    "cursor": ""
  });
  
  //$(this).closest('li').addClass('d-none');
  //$('.check_in').closest('li').removeClass('d-none');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
  <a class="nav-link check_in" href="#">Check In
        </a>
</li>

<li class="nav-item">
  <a class="nav-link check_out" href="#">Check Out
        </a>
</li>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.