1. 程式人生 > >bootstrap-modal:彈出modal時input的checked的狀態無法改變 | | input獲取焦點不生效

bootstrap-modal:彈出modal時input的checked的狀態無法改變 | | input獲取焦點不生效

1.每次彈出modal時 ,用 js 修改的 checked 狀態不能實時更新

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label
="Close">
<span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <input type='checked' id='platNumber' > <span for='platNumber'>訂單建立日期</span
>
</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal -->
$('#platNumber').attr('checked',true); // 這是一個後臺寫的,他找了好多辦法都是針對modal的,但不奏效

這其實不是 modal 的問題,是 input 的問題

$('#platNumber').prop('checked',true);

checkboxradioselect 這樣的元素,選中屬性對應“checked”和“selected”,這些也屬於固有屬性,因此需要使用 prop 方法去操作才能獲得正確的結果。

2. 在 modal 彈出時,讓 input 獲取焦點

$('#platNumber').focus(); // 並不生效,因為執行時的 modal 也許還沒渲染完,所以需要定時器

setTimeout(function(){
    $('#platNumber').focus(); // 這就可以生效了
},300);

相關推薦

bootstrap-modalmodalinput的checked的狀態無法改變 | | input獲取焦點生效

1.每次彈出modal時 ,用 js 修改的 checked 狀態不能實時更新 <div class="modal fade" tabindex="-1" role="dialog">

bootstrap中的模態框(modal層)

bootstrap中的模態框(modal),不同於Tooltips,模態框以彈出對話方塊的形式出現,具有最小和最實用的功能集。務必將模態框的 HTML 程式碼放在文件的最高層級內(也就是說,儘量作為 body 標籤的直接子元素),以避免其他元件影響模態框的展現或功能。 預

Modal後,2s自動消失

rop 動畫效果 col 彈出 OS gpo showmodal smi dismiss 1、html代碼(bootstrap組件)<!--modal提示信息--><div class="modal fade" id="showModal"> &l

Bootstrap框和提示框效果以及程式碼展示

前言:對於Web開發人員,彈出框和提示框的使用肯定不會陌生,比如常見的表格新增和編輯功能,一般常見的主要有兩種處理方式:行內編輯和彈出框編輯。在增加使用者體驗方面,彈出框和提示框起著重要的作用,如果你的系統有一個友好的彈出提示框,自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件,這

JS元件系列——Bootstrap寒冬暖身篇框和提示框效果以及程式碼展示

前言:對於Web開發人員,彈出框和提示框的使用肯定不會陌生,比如常見的表格新增和編輯功能,一般常見的主要有兩種處理方式:行內編輯和彈出框編輯。在增加使用者體驗方面,彈出框和提示框起著重要的作用,如果你的系統有一個友好的彈出提示框,自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件,這

使用ajaxupload外掛放在modal框的情況下,關閉框會繼續保留隱藏的input檔案框的解決辦法

使用ajaxupload外掛放在彈出框的情況下,關閉彈出框會繼續保留隱藏的input檔案框的解決辦法 思路是在modal框關閉時隱藏該input檔案框 $('#myModal').on('hide.b

android註冊的協議---》方法一

一:程式碼: // 服務條款 jiaoseSJ_service = (TextView) findViewById(R.id.jiaoseSJ_service); jiaoseSJ_service.s

ReactNativeModal對話方塊

const RootStackWithModal = createStackNavigator( { Ma

AlertDialog鍵盤彈起的問題解決

根據鍵盤問題彙總得知dialog的跟佈局應改為Scrollview 同時應使用adjustResize 因此增加一個style <style name="dialog_soft_input" parent="Theme.AppCompat.Light.Dialog.Ale

layer 層引數介紹

例子:       layer.open({             type: 2,             title: '彈出層標

JQuery選單禁止頁面(body)滾動

最近在做手機端的彈出選單,但是選單彈出來後滑動手機螢幕的話頁面滾動總是會將選單滑上去,體驗非常不好,所以查了一下彈出選單時禁止頁面滾動的方法,整理如下: 方法一:彈出選單時給body和html新增一個css樣式:height:100%;overflow:hidden;彈出層消失再去掉這個類。(只給body新

網絡卡故障介面eth0: 錯誤沒有找到合適的裝置沒有找到可用於連結System eth0 的

今天在使用putty連線linux6.0系統遠端的時候,重啟網絡卡的時候發現此報錯: 報錯截圖如下: 排錯步驟如下: 1:檢視系統是否識別相應網絡卡(發現沒有eth0網絡卡存在): 根據顯示資訊我們可以初步判定系統網絡卡資訊有問題: 2:檢視當前MAC地址相關資訊:

Selenium3+webdriver學習筆記13(js操作應用框無效如何處理)

#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver學習筆記13(js操作應用:彈出框無效如何處理)'''from selenium import webdriverfrom selenium.webdriver.common.ac

H5移動端鍵盤遮擋輸入框

記一次,解決移動端文字框彈出鍵盤遮擋輸入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用來將不在瀏覽器視窗的可見區域內的元素滾動到瀏覽器視窗的可見區域。 如果該元素已經在瀏覽器視窗的可見區域內,則不會

Vue 禁止底層body頁面滑動

/***滑動限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; docume

JavaScript:關閉視窗重新整理父視窗

程式碼1(開啟新視窗): 程式碼1(開啟新視窗): <a href="#" onClick="Javascript:window.open('meeting_add.jsp','','width=560,height=397')">超連結</a> 程式碼2(關閉彈

bootstrap優美的

使用bootstrap框架發現沒有好的提示框 在網上還找到一個效果比較炫一點的提示框:sweetalert (1)文件 sweetalert Api:http://t4t5.github.io/sweetalert/ 開源專案原始碼:https://github.com/t4t5/s

bootstrap提示和

一、提示效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

bootstrap-js-訊息

1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

Vue 禁止頁面滑動

上程式碼 /***滑動限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; documen