I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
Related
friends, I want to turn the datepicker on and off in both input and icon clicks in this code structure, but I couldn't succeed, can you help?
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datetimepicker').datetimepicker({
viewMode: 'years'
});
});
</script>
</div>
I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I am using Tempus Dominus Bootstrap 4 datepicker ,try to get maxday and minday value from datepicker,but i am not geting.Please Any one can help me.
If you look at the documentation, you can enable/disable dates via the code below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker6" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker6"/>
<div class="input-group-append" data-target="#datetimepicker6" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
I am using Eonasdan Bootstrap-datetimepicker in my project ! Is there any option to change the position of close button from top to bottom ? (Not Widget Position). I searched in there documentation but I cant find it.
Thanks in advance
You must use the toolbarPlacement option for this.
Default: 'default'
Accepts: 'default', 'top', 'bottom'
$('#myDatepicker').datetimepicker({
toolbarPlacement: 'bottom',
showClose: true,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<br/>
<!--Space for the fiddle-->
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
in the following, I am using filter('input:text,textarea') to set input fields as read only, (and make them opaque). However, this selector is selecting only the text inputs, and not the textarea. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>setReadOnly() Test</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="../scripts/jqia2.support.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadOnly = function(readonly) {
return this.filter('input:text,textarea')
.attr('readOnly',readonly)
.css('opacity', readonly ? 0.5 : 1.0)
.end();
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same ? $('#shipAddress').val():'');
$('#billCity').val(same ? $('#shipCity').val():'');
$('#billState').val(same ? $('#shipState').val():'');
$('#billZip').val(same ? $('#shipZip').val():'');
$('#bill_random_field').val(same ? $('#ship_random_field').val():'');
$('#billingAddress input').setReadOnly(same);
});
});
</script>
</head>
<body>
<div data-module="Test setReadOnly()">
<form name="testForm">
<div>
<label>First name:</label>
<input type="text" name="firstName" id="firstName"/>
</div>
<div>
<label>Last name:</label>
<input type="text" name="lastName" id="lastName"/>
</div>
<div id="shippingAddress">
<h2>Shipping address</h2>
<div>
<label>Street address:</label>
<input type="text" name="shipAddress" id="shipAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="shipCity" id="shipCity"/>
<input type="text" name="shipState" id="shipState"/>
<input type="text" name="shipZip" id="shipZip"/>
<textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea>
</div>
</div>
<div id="billingAddress">
<h2>Billing address</h2>
<div>
<input type="checkbox" id="sameAddressControl"/>
Billing address is same as shipping address
</div>
<div>
<label>Street address:</label>
<input type="text" name="billAddress"
id="billAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="billCity" id="billCity"/>
<input type="text" name="billState" id="billState"/>
<input type="text" name="billZip" id="billZip"/>
<textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Try to change the line $('#billingAddress input').setReadOnly(same); to $('#billingAddress input,textarea').setReadOnly(same);
Update
Actually, must be like you said in the comment: $('#billingAddress input,#billingAddress textarea').