CSS 바꿔야 해
.g > 输入 + span 및
말하는 방법을 찾고 있습니다. ID가 "S"로 시작하는 체크박스 요소에만 스타일 속성 설정을 적용하는 방법입니다.
.g > Enter + 범위::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute left: 0.36rem; 위로: 0.12rem;}
.g4 > Enter + 범위 ::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: Absolute;left: 0.19rem;top :0.12rem;}
CSS 변수를 사용하지 않는 솔루션을 원합니다.
이것은 단지 JS와 CSS 문제가 아닙니다.
이것은 의사 요소에 관한 질문이 아닙니다
이 페이지는 정적이지 않습니다.
이 애플리케이션에는 2,000개가 넘는 체크박스가 있습니다.
특정 시점에 표시되는 확인란의 하위 집합은 매우 동적입니다.
HTML
으아악지침
화학 알레르기 혈액 검사를 주문하는 의사를 위한 주문 입력 확인란입니다.
일부 화학물질(ID는 "S"로 시작)은 E형 항체만 검출할 수 있습니다
E, G, G4 항체를 테스트하는 화학물질("C"로 시작하는 ID)이 있습니다.
예
JS Fiddle 애플리케이션 예시
G와 G4에서는 아나토, 오리스 뿌리, 파파인, 제충국만 확인하세요.
선택되지 않음
확인됨
이 JS를 사용하여 "S"로 시작하는 ID에 대한 확인란 G 및 G4를 비활성화했습니다.
자바스크립트
으아악이 예에서는 Quinoline Yellow(#10)의 G 및 G4 확인란의 불투명도를 0.25로 변경하고 싶습니다
확인란을 비활성화할 수 있지만 텍스트를 더 어둡게 만들어(예: "G" 및 "G4") G 및 G4 선택을 사용할 수 없음을 의사에게 알리고 싶습니다.
JS에서는 어떻게 표현해야 할지 모르겠어요:.g > input + span::before{
다음 표현식에서 물음표가 있는 곳은 어떻게 되나요?
(또는 사용할 수 있는 다른 선택기)
으아악이 작업을 수행하는 방법에 대한 다른 아이디어가 있으면 CSS, HTML 및 JS 변경에 대한 모든 권한이 있습니다.
제가 시도한 위의 예는 아마도 불행한 일이었을 것이므로 그렇게 해야 한다고 편견을 갖지 마십시오.
이 페이지는 PHP로 생성되었습니다.
JS const dc는 PHP로 생성됩니다.
ID가 "S"로 시작하면 ID를 JS dc 배열에 추가합니다.
저는 여러분이 공감할 수 있는 새로운 아이디어에 대해 많은 유연성을 가지고 있습니다.
으아악
전체 체크박스 CSS
<div class="row"> <div class="dchk"><label class="e chk"> <input type="checkbox" id="C0081" class="chk" name="aC0081" value="1" /><span></span></label></div> <div class="dchk"><label class="g4 chk"><input type="checkbox" id="C0083" class="chk" name="aC0083" value="3" /><span></span></label></div> <div class="dchk"><label class="g chk"> <input type="checkbox" id="C0082" class="chk" name="aC0082" value="2" /><span></span></label></div> <div class="inline"> Pyrethrum</div></div> <div class="row"> <div class="dchk"><label class="e chk"> <input type="checkbox" id="S0171" class="chk" name="aS0171" value="1" /><span></span></label></div> <div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0173" class="chk" name="aS0173" value="3" /><span></span></label></div> <div class="dchk"><label class="g chk"> <input type="checkbox" id="S0172" class="chk" name="aS0172" value="2" /><span></span></label></div> <div class="inline"> Quinoline Yellow (#10)</div></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
여기서 배운 것들은 나에게 매우 소중합니다. 감사해요.
이 문제를 해결하기 위해 JavaScript 루틴을 만들었습니다.
JS Fiddle JavaScript 솔루션에 연결하세요.
하지만 저는 사용하지 않았어요.
나는 PHP/HTML 솔루션을 선호합니다.
모든 HTML은 PHP
에서 생성됩니다. 이것이 제가 문제를 해결한 방법입니다.
체크박스처럼 보이도록 스타일이 지정된
<span>添加了两个类（dim和disable)을 가리켰습니다.체크박스를 생성하는 PHP:
으아악생성된 HTML:
으아악변경된 HTML 클래스가 줄 끝의
span>에 추가됩니다.체크박스
id가 "C"로 시작하는 경우체크박스
으아악id가 "S"로 시작하는 경우여기에는 두 개의 행이 있으며 각 행에는 세 개의 확인란이 있습니다. 하나는 C, 하나는 S
으아악document.querySelectorAll를 사용하여 문제를 해결할 수 있습니다CSS
으아아아그런 다음 자바스크립트를 통해 요소에 클래스를 추가하세요
으아아아참조: https://jsfiddle.net/nfrap0hd/