Laravel - Tutorial Java Script 4 (Disabled and Enabled Toggle Button)

Kemarin kita sudah mempraktekan membuat sebuah button Follow, dengan konsep "hide and show with data-JS". 

Kali ini kita akan membuat sebuah button checkbox yang terintegrasi dengan JS,

Oke langsung saja kita praktekkan tutorialnya.

Pertama, buat routes baru untuk tutorial ini, dengan menambahkan code pada file web.php pada path protected/app/routes/ menjadi seperti ini.

.
.
.
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
 Route::get('js2', 'Controller\belajar_js\Js2Controller@Index');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
});
.
.
.

Selanjutnya buat controller baru dengan nama Js4Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut.

<?php namespace Controller\belajar_js;

use \View;

Class Js4Controller Extends \BaseController
{
 public function Index()
 {
  return View::make('web/java-script4');
 }
}

Jangan lupa compile file composer lihat disini pada bab composer.

Kemudian buat file view baru dengan nama java-script4.blade.php pada path protected/app/views/web/ isi dengan code berikut.

@extends('layouts/web/master')

<?php $title = 'Java Script 4' ?>

@section('style')
@stop

@section('script')
 {{ HTML::script('public/js/js4.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 4</h4>
 <br>
 <label>Checked and Unchecked with prop</label>
 <br><br>
 <input type="checkbox" name="toggle-check" onclick="toggleCheck(this)">
 <br><br>
 <input type="text" name="effect" disabled> 
</div>
@stop

Setelah itu buat file JS baru dengan nama js4.js pada path public/js/ isi dengan code berikut.

function toggleCheck(button)
{
 if ($(button).prop('checked')) {
  $('[name=effect]').prop('disabled', false);
 } else {
  $('[name=effect]').prop('disabled', true);
 }
}

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini.

.
.
.
   <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
        <a href="{{ URL::to('javaScript/js4')}}">Belajar Script4</a>
      </div>
    </div>
.
.
.

Hasilnya akan terlihat seperti ini

===DONE!===