Sakelar Bootstrap - status AKTIF

Saya menggunakan pustaka sakelar bootstrap ini.

Saya memiliki kotak centang di html saya. Sekarang, dokumen tersebut selalu ditampilkan dalam status OFF, meskipun properti yang dicentang disetel ke true saat dokumen dimuat.

Apa yang perlu saya lakukan selain itu?

Edit - Yang saya pahami adalah Switch menambahkan wadah di sekitar bidang kotak centang tipe input dengan kelas bootstrap-switch-off secara default, terlepas dari nilai atribut yang dicentang yang disertakan dengan bidang kotak centang.

<input type="checkbox" name="my-custom" id="Switch" checked="true">

twitter-bootstrap bootstrap-switch
person user2171262    schedule 02.07.2014    source sumber
comment
Bisakah Anda memposting HTML yang Anda hasilkan?   -  person DavidG    schedule 02.07.2014
comment
bisakah Anda menunjukkan kode javascript Anda?   -  person Nicolai    schedule 02.07.2014

Jawaban (2)


arrow_upward
12
arrow_downward

Ingatlah bahwa checked adalah atribut boolean, artinya kehadirannya saja yang menentukan apakah akan diterapkan. Di HTML5, Anda dapat menggunakan sintaksis atribut kosong sebagai checked atau checked="", tapi saya berhati-hati agar tidak menggunakan checked="true", karena ini menyiratkan checked="false" akan benar-benar melakukan sesuatu. Sedangkan checked='potato' juga sama validnya.

Kode berikut harus menginisialisasi saklar bootstrap dengan kotak centang yang aktif atau nonaktif:

<input type="checkbox" class="switch" checked /> <!-- on  -->
<input type="checkbox" class="switch" />         <!-- off -->

$("input.switch").bootstrapSwitch();

tangkapan layar

Demo Bekerja di Cuplikan Stack & jsFiddle

$("input.switch").bootstrapSwitch();
body { padding: 15px; }
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">

<div >
    <label for="chk1">Default On:</label>
    <input type="checkbox" class="switch" id="chk1" checked />
</div>

<div>
    <label for="chk2">Default Off:</label>
    <input type="checkbox" class="switch" id="chk2" />
</div>

Bacaan lebih lanjut

person KyleMit    schedule 02.07.2014
comment
@peace_love, terima kasih atas perhatiannya - memperbaiki dan menambahkan demo sebaris - jika berhasil, bisakah Anda menghapus komentar Anda untuk mencegah kebingungan bagi pengguna di masa mendatang dan saya akan menghapus komentar saya dalam 24 jam - person KyleMit; 05.08.2020

arrow_upward
0
arrow_downward

Memecahkan masalah ini, dan itu adalah masalah yang sederhana.

Saya harus menambahkan 'acara' ke fungsi handleChange saya

handleChange: function (event, state) {
      console.log(state);
      this.setState({storyStatus: state});
  },
person chinds    schedule 22.12.2015