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

news2024/12/23 18:42:56

页面开关默认为关闭状态,输入框为禁用状态。
当点击开关,打开开关后,输入框禁用状态解除,才可以在输入框内输入。
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;
	});
}

禁用状态:

打开状态:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2205969.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用three.js 实现一个 马赛克得 shader

使用three.js 实现一个 马赛克得 shader 源链接&#xff1a;https://threehub.cn/#/codeMirror?navigationThreeJS&classifyshader&idmosaicShader 国内站点预览&#xff1a;http://threehub.cn github地址: https://github.com/z2586300277/three-cesium-example…

HTML的介绍

HTML HTML是一种超文本标记语言,超文本是指,除了文本之外,还可能包含图片,音频,或者评注等的 文本形式,比文本强大,通过链接和交互方式来组织和呈现信息.标记语言是指,由标签构成的语言.HTML定义了多种不同的标签,用来表示不同的内容. 标签的介绍: 1.<h3> 三级 </h3&…

增强AI查询:使用Rewrite Retrieve Read框架优化RAG

增强AI查询&#xff1a;使用Rewrite Retrieve Read框架优化RAG 引言 在大规模语言模型&#xff08;LLM&#xff09;中&#xff0c;通过查询重写来提升检索增强生成&#xff08;RAG&#xff09;的性能是一个热门研究领域。本文将介绍如何使用rewrite_retrieve_read模板来优化R…

基于SpringBoot的图书推荐系统的设计与实现(论文+源码)_kaic

摘 要 网络信息技术的高速发展&#xff0c;使得高校图书馆的服务空间日益扩大&#xff0c;依据个人特点的针对性服务逐渐成为新服务模式的主导趋势。对于大多数用户而言&#xff0c;很难在大量的学术图书馆中快速找到他们想要的材料。另外&#xff0c;随着时代的不断发展&am…

Mysql的LSN是什么?

LSN的含义 ​ LSN全称为 Log Sequence Number&#xff0c;即日志序列号。它是一个不断递增的数字&#xff0c;用来标识事务日志中的每个操作或事件。LSN是一个64位的数字&#xff0c;每一个LSN值都是唯一的&#xff0c;并且随时间线性增加。 ​ 通过SHOW ENGINE INNODB STATUS;…

GADBench Revisiting and Benchmarking Supervised Graph Anomaly Detection

Neurips 23 推荐指数&#xff1a; #paper/⭐⭐⭐ 领域&#xff1a;图异常检测 胡言乱语&#xff1a; neurips 的benchmark模块的文章总能给人一些启发性的理解&#xff0c;这篇的insight真有意思。个人感兴趣的地方会加粗。此外&#xff0c;这篇文章和腾讯AIlab合作&#xff…

嵌入式基本知识

文章目录 调试接口仿真器MCU实际的调试接口 调试接口 调试接口用于对MCU进行编程和调试&#xff0c;这里的编程指将源代码编译后的.hex文件写入MCU闪存特定地址中&#xff0c;调试指MCU运行代码debug的过程。 不同的接口协议有不同的接口类型。SWD协议调试接口的引脚主要有&a…

卡码网C++基础课 |20. 排队取奶茶

目录 前言 一、题目描述 二、解题思路 1.队列 2.队列的操作 三、完整代码 总结 前言 仅个人记录所用 源自卡码网的C基础课 “这门C基础课 帮助 编程零基础学员快速学习刷算法题所需要的基础语法知识&#xff0c;学完之后&#xff0c;再来刷代码随想录&#xff0c;或者自己去…

CentOS 7.9 局域网配置指定同步时间服务器

在 CentOS 7.9 中&#xff0c;默认的时间同步工具是 chrony。以下是如何配置 NTP 服务器地址并使用 chrony 进行时间同步的步骤&#xff1a; 1. 安装 chrony&#xff08;通常已经预装可忽略&#xff09; 通过systemctl status chronyd检查是否已经安装启动 如果没网可以直接…

npm安装依赖报错npm ERR! Unexpected token ‘.

电脑是windows的&#xff0c;因为有多个项目做开发&#xff0c;每个项目需要的node版本不一样&#xff0c;所以使用了nvm做node管理。 电脑的nvm是1.1.7版本的。 新项目在安装依赖时突然报错如下&#xff1a; npm ERR! Unexpected token .在网上查了很多都说是nvm版本太低了&…

【MLP-Mixer】核心方法解读

abstract&#xff1a; 我们提出MLP-Mixer架构(或简称“Mixer”)&#xff0c;这是一个具有竞争力但在概念和技术上都很简单的替代方案&#xff0c;它不使用卷积或自关注。相反&#xff0c;Mixer的架构完全基于多层感知器(mlp)&#xff0c;这些感知器可以在空间位置或特征通道上…

渗透测试 之 域渗透手法【域内用户枚举】手法 Kerbrute msf pyKerbrute 工具使用详解

说明一下: 域内用户枚举工具使用说说&#xff1a; Kerbrute pyKerbrute MSF模块的使用 域内用户名枚举原理分析&#xff1a; 域内用户枚举攻击防御&#xff1a; 流量检测&#xff1a; 日志层面&#xff1a; 说明一下: 域环境或者内网环境下&#xff0c;可以在没有域环…

深入理解Transformer的笔记记录(精简版本)---- ELMO->GPT->BERT

1、ELMO word embedding无法区分多义词的不同语义,其本质上是个静态的方式,所谓静态指的是训练好之后每个单词的表达就固定住了,以后使用的时候,不论新句子上下文单词是什么,这个单词的Word Embedding不会跟着上下文场景的变化而改变 ELMO根据当前上下文对Word Embed…

有趣的python库:用 difflib 实现文本差异的可视化

一&#xff0c;介绍 difflib 模块是Python标准库的一部分&#xff0c;提供了一系列用于比较序列的类和函数&#xff0c;特别适用于文本比较任务。这个模块可以帮助用户发现两个文本文件或字符串序列之间的差异&#xff0c;并以多种格式展示这些差异&#xff0c;比如这样&#…

400行程序写一个实时操作系统RTOS(开篇)

笔者之前突发奇想&#xff0c;准备写一个极其微小的实时操作系统内核&#xff0c;在经过数天的努力后&#xff0c;这个RTOS诞生了。令读者比较意外的是&#xff0c;它的程序只有400行左右。但就是这短短的400行&#xff0c;完成了动态内存管理、多线程、优先级、低功耗管理、调…

深度学习--------------------------------使用注意力机制的seq2seq

目录 动机加入注意力Bahdanau注意力的架构 总结Bahdanau注意力代码带有注意力机制的解码器基本接口实现带有Bahdanau注意力的循环神经网络解码器测试Bahdanau注意力解码器该部分总代码 训练从零实现总代码简洁实现代码 将几个英语句子翻译成法语该部分总代码 将注意力权重序列进…

BUG修复(不断整理想起什么就整理什么)

声明&#xff1a;此篇博文是记录本人从开始学习计算机过程中遇到的各种类型的报错以解决办法,希望给同道中人提供一点绵薄的帮助&#xff0c;也欢迎大家在评论区讨论或私信我交流问题 共同进步&#xff01; 一、FPGA系列 1.Synthesis failed 错误&#xff1a;综合失败&#…

Python | Leetcode Python题解之第468题验证IP地址

题目&#xff1a; 题解&#xff1a; class Solution:def validIPAddress(self, queryIP: str) -> str:if queryIP.find(".") ! -1:# IPv4last -1for i in range(4):cur (len(queryIP) if i 3 else queryIP.find(".", last 1))if cur -1:return &q…

测试工作能干到退休!从会写一份成长型测试周报开始

测试周报则是反映团队工作进展和专业态度的一扇窗口。通过周报&#xff0c;我们不仅可以展示一周内的工作成果&#xff0c;更可以体现团队的工作心态——是积极进取、不断学习的成长型心态&#xff0c;还是仅仅满足于现状、缺乏动力的躺平型心态。本文将带您深入了解这两种不同…

Vue 项目文件大小优化

优化逻辑 任何优化需求&#xff0c;都有一个前提&#xff0c;即可衡量。 那 Vue 加载速度的优化需求&#xff0c;本质上是要降低加载静态资源的大小。 所以&#xff0c;优化前&#xff0c;需要有一个了解项目现状的资源加载大小情况。 主要分 3 步走&#xff1a; 找到方法测…