首页 > 其他分享 >开关打开输入框才能输入文字,否则为禁用状态

开关打开输入框才能输入文字,否则为禁用状态

时间:2024-10-11 19:48:15浏览次数:3  
标签:box 输入框 禁用 top height 开关 margin width

页面开关默认为关闭状态,输入框为禁用状态。
当点击开关,打开开关后,输入框禁用状态解除,才可以在输入框内输入。
html结构:

<div class="page_top">
							<!-- 第一行 -->
							<div class="top_first">
								<div class="shangwu">上午</div>
								<div class="switch-box">
									<input onclick="auditedit()" id="switche" class="switches" type="checkbox" />
									<label></label>
								</div>
							</div>
							<!-- 输入框 -->
							<input type="text" placeholder="输入开始时间" class="import" disabled />
							<input type="text" placeholder="输入结束时间" class="import" disabled />
							<input type="text" placeholder="输入号源" class="import" disabled />
						</div>

css样式:

/* 上午 */
.page_top {
	width: 80%;
	height: 180px;
	margin-left: 10%;
	margin-top: 20px;
}

.top_first {
	width: 100%;
	display: flex;
	height: 40px;
	justify-content: space-between;

}

.shangwu {
	font-size: 20px;
	color: #ffffff;
}

/* 复选框 */
.switch-box label {
	width: 50px;
	height: 26px;
	background: #ccc;
	position: relative;
	display: inline-block;
	border-radius: 46px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	margin-top: 3px;
}

.switch-box label:after {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	left: 0;
	top: 10px;
	z-index: 2;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.switch-box input {
	position: absolute;
	z-index: 5;
	width: 60px;
	height: 26px;
	opacity: 0;
	cursor: pointer;
}

.switch-box label:after {
	top: 0;
	width: 22px;
	height: 22px;
	margin: 1px 0;
}

.switch-box input:checked+label {
	background: #eb8597;
}

.switch-box input:checked+label:after {
	left: 24px;
}

/* 输入框 */
.import {
	width: 100%;
	height: 30px;
	margin-top: 8px;
	outline: 0;
	border: 0;
	border-radius: 3px;
}

.imports {
	width: 100%;
	height: 30px;
	margin-top: 8px;
	outline: 0;
	border: 0;
	border-radius: 3px;
}

js代码:

// 点击开关 输入框可以编辑
function auditedit() {
	var switche = document.getElementById('switche');
	var imports = document.querySelectorAll('.import');
	imports.forEach(function(input) {
		input.disabled = !switche.checked;
	});
}

禁用状态:

打开状态:

 

标签:box,输入框,禁用,top,height,开关,margin,width
From: https://blog.csdn.net/2301_81449444/article/details/142861201

相关文章

  • Flutter基础组件(6):单选按钮、复选框、单选开关
    在移动应用开发中,单选和复选是常见的用户交互模式,用于选择一个或多个选项。Flutter提供了一些内置的组件和机制,方便我们实现单选和复选功能。本文将介绍Flutter中的单选按钮(RadioButton)和复选框(Checkbox)的使用方法和示例。一、单选按钮(RadioButton)单选按钮是一种用户界面组件......
  • ETA6005Q3Q 2.5A带动态路径管理的单节锂电开关型充电器
    2.5A带动态路径管理的单节锂电开关型充电器  ETA6005是一款充电电流达2.5A的单节锂电开关型充电。其集成了动态路径管理功能,内部路径的开关内阻仅50mohm,允许系统在没有电池的情况下,仍然可以在适配器存在是维持系统正常工作。ETA6005有特有的2级充电设定可通过引脚的0,1来设......
  • Android 11.0 第三方app授予DeviceOwner权限调用系统reboot,显示隐藏app,锁屏,禁用app
    1.前言 在11.0的系统rom定制化开发中,在有些客户开发app的功能中,需要系统授予app的DeviceOwner权限,然后app就可以实现重启关机禁用下拉通知栏,显示隐藏app,等功能,首选需要在app和framework中配置相关功能,接下来具体分析相关功能的实现2.第三方app授予DeviceOwner权限调用系统......
  • SMB签名是一种通过数字签名技术保障数据在网络传输过程中的完整性和来源验证的机制。
    SMB签名是ServerMessageBlock(SMB)协议中的一种安全机制,旨在确保数据的完整性和身份验证。1.什么是SMB签名?SMB签名是一种通过数字签名技术保障数据在网络传输过程中的完整性和来源验证的机制。它通过对数据进行哈希处理,并附加一个签名,确保接收方能够确认收到的数据没有被篡改。......
  • antv X6 全局禁用节点和边拖动,画布可以拖动
    项目有个需求,通过接口获取用户权限,限制用户拖动节点和边查阅文档和百度发现Graph可以配置interacting来限制节点和边的交互但是用户的权限通过接口获取,如何动态配置interacting是否为false1、节点的node.prop可以进行通信,但是需要遍历画布的所有节点,参考https://codesa......
  • 25N10-智能调光N通道MOS管--HG024N10L 100V 25A 低Vth 低结电容 开关损耗小
    25N10-智能调光N通道MOS管工作原理主要依赖于栅极电压来控制导电沟道的状况。具体来说:工作原理:当加在MOS管栅极上的电压改变时,PN结之间的沟道内载流子的数量会随之改变,沟道电阻也会发生改变,进而控制漏极电流的大小。N沟道MOS管:N沟道加强型MOS管需在栅极上施加正向偏压,且栅源电压大......
  • 川土微在直流充电桩上的应用,CA-IS3641HVW隔离芯片、CA-IS3417WT隔离开关、CA-IS3980P
    川土微隔离器芯片涵盖:标准数字隔离器、电表专用数字隔离器、集成隔离电源的标准数字隔离器、隔离I2C、隔离CAN、带隔离电源的隔离CAN、隔离RS-485/422、带隔离电源的隔离RS-485/422、低成本隔离RS-485/422、0.5W全集成隔离电源、全差分隔离运放、隔离误差运放等。充电桩控制器整......
  • 【linux安全】禁用 ASLR
    地址空间布局随机化(ASLR)是在大多数现代操作系统中实施的一种安全措施。它会改变程序使用的内存地址,包括堆栈、堆和库,使攻击者更难利用漏洞。在Linux中,可以使用/proc/sys/kernel/randomize_va_space文件配置ASLR。地址空间布局随机化(ASLR)安全功能,使攻击者更难预测特定函......
  • 大厂笔试现已经禁用本地IDE怎么看
    如果我说本来面试做题这种事情就是反人类你相信吗?这个罪恶的源头就是Google,说是为了选择高素质的计算机编程水平的人才,然后把面试就变成了考试,最大的受益者当然是印度人了。当把一个考察过程变成标准化的考试过程,那么整个过程自然就有作弊的,因为只要有考试就会有舞弊这个几千年都......
  • PbootCMS在阿里云主机上邮件发送失败:服务器已经禁用stream_socket_client和fsockopen
    当你遇到PBootCMS网站的留言邮件通知功能失效,并且提示“服务器已经禁用 stream_socket_client 和 fsockopen 函数,请至少开启一个才能发送邮件!”时,这通常是因为服务器的安全策略禁用了这些函数。解决方法如下:步骤1:检查服务器配置登录阿里云主机管理后台:登录阿里云控制台......