สวิตช์ Bootstrap - สถานะเปิด

ฉันใช้ ไลบรารีสวิตช์ bootstrap นี้

ฉันมีช่องทำเครื่องหมายใน html ของฉัน ขณะนี้จะแสดงอยู่ในสถานะปิดเสมอ แม้ว่าคุณสมบัติที่เลือกไว้จะถูกตั้งค่าเป็นจริงเมื่อโหลดเอกสารก็ตาม

ฉันต้องทำอะไรนอกเหนือจากนั้น?

แก้ไข - สิ่งที่ฉันเข้าใจคือ Switch กำลังเพิ่มคอนเทนเนอร์รอบๆ ช่องทำเครื่องหมายประเภทอินพุตโดยมีคลาส bootstrap-switch-off เป็นค่าเริ่มต้น โดยไม่คำนึงถึงค่าของแอตทริบิวต์ที่เลือกซึ่งไปกับช่องทำเครื่องหมาย

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

twitter-bootstrap bootstrap-switch
person user2171262    schedule 02.07.2014    source แหล่งที่มา
comment
คุณสามารถโพสต์ HTML ที่คุณผลิตได้หรือไม่?   -  person DavidG    schedule 02.07.2014
comment
คุณช่วยแสดงรหัสจาวาสคริปต์ของคุณได้ไหม?   -  person Nicolai    schedule 02.07.2014

คำตอบ (2)


arrow_upward
12
arrow_downward

โปรดจำไว้ว่า checked เป็น แอตทริบิวต์บูลีน หมายความว่าการมีอยู่เพียงอย่างเดียวจะกำหนดว่าจะใช้หรือไม่ ใน HTML5 คุณสามารถใช้ ไวยากรณ์แอตทริบิวต์ว่าง เป็นอย่างใดอย่างหนึ่ง checked หรือ checked="" แต่ฉันขอเตือนไม่ให้ใช้ checked="true" เพราะมันบอกเป็นนัยว่า checked="false" จะทำอะไรบางอย่างจริงๆ ในขณะที่ checked='potato' มีความถูกต้องเท่าเทียมกัน

รหัสต่อไปนี้ควรเริ่มต้นสวิตช์บูตสแตรปโดยมีช่องทำเครื่องหมายเปิดหรือปิดเป็นค่าเริ่มต้น:

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

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

ภาพหน้าจอ

การสาธิตการทำงานใน Stack Snippets & 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>

อ่านเพิ่มเติม

person KyleMit    schedule 02.07.2014
comment
@peace_love ขอบคุณสำหรับการแจ้งเตือน - แก้ไขและเพิ่มการสาธิตแบบอินไลน์แล้ว - หากได้ผล คุณสามารถลบความคิดเห็นของคุณเพื่อป้องกันความสับสนสำหรับผู้ใช้ในอนาคต และฉันจะลบของฉันภายใน 24 ชั่วโมง - person KyleMit; 05.08.2020

arrow_upward
0
arrow_downward

แก้ไขปัญหานี้แล้วและมันก็เป็นเรื่องง่าย

ฉันต้องเพิ่ม 'เหตุการณ์' ในฟังก์ชัน handleChange ของฉัน

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