필드를 비활성화하지 않고 SELECT 옵션 선택을 제한합니다.

StackOverflow https://stackoverflow.com/questions/43874

문제

최종 사용자가 값을 변경할 수 없도록 하고 싶은 다중 선택 SELECT 필드가 있습니다.

UI상의 이유로 저는 비활성화="true" 속성을 사용하지 않고도 이 작업을 수행할 수 있기를 바랍니다.나는 onmousedown, onfocus, onclick을 사용해 보았고 각각을 흐리게 하거나 false를 반환하도록 설정했지만 성공하지 못했습니다.

이것이 가능합니까, 아니면 불가능한 일을 하려고 하는 것입니까?

도움이 되었습니까?

해결책

나는 당신이 원하지 않는다고 언급했다는 것을 알고 있지만 실제로는 disabled 속성이 더 나은 솔루션입니다.

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

필요한 경우 언제든지 제공할 수 있습니다. select ㅏ class CSS로 스타일을 지정하세요.이 솔루션은 스크립팅 기능에 관계없이 모든 브라우저에서 작동합니다.

다른 팁

당신은 그것을 할 수 있습니까? onchange 이벤트?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

가장 좋은 방법은 선택 상자 내의 옵션을 바꾸는 것입니다.해당 상자에 답변이 하나만 있는 경우 클릭할 수 있는지 여부는 중요하지 않습니다.

하지만 사용자에게 불만을 불러일으킬 것 같기 때문에 다른 방법을 찾아보겠습니다.다음 사용자 시나리오를 상상해 보세요.

  1. "보세요, 옵션 선택 상자가 있습니다."
  2. 딸깍 하는 소리
  3. "흠, 왜 효과가 없었나요?"
  4. 딸깍 하는 소리
  5. 딸깍 하는 소리!
  6. "이 멍청한 놈은 망가졌어. 난 다시는 여기로 돌아오지 않을 거야."

선택 항목을 HTML 텍스트로 바꾸면 동일한 목표를 달성합니다.이는 대부분의 주요 Javascript 프레임워크에서 매우 간단한 작업입니다.

@Jack & @17 of 26, 좋은 지적이지만 최종 사용자는 혼란이 문제가 되지 않도록 선택 상자가 비활성화되기를 기대합니다.

왜 컨트롤을 비활성화할 수 없는지 더 명확하게 설명했어야 했습니다.

이를 사용할 응용 프로그램에서는 옵션 선택을 비활성화해야 하며 "잠긴" 컨트롤이 여전히 일반 형식 컨트롤의 모양과 느낌을 유지해야 한다는 요구 사항이 있습니다.

이 트리거를 사용해 보세요.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

최근 CSS3에 새로 추가된 사항이 있습니다. 95% 호환 Opera Mini를 제외한 모든 현재 브라우저에서 pointer-events.간단히 말해서, 기본 작업을 "비활성화"할 수 있습니다. SELECT 또는 다른 요소에도 여전히 특정 이벤트를 수행할 수 있습니다.

이에 대한 Chris Coyier의 기사를 다음에서 볼 수 있습니다. 여기에 링크 설명을 입력하세요.

이것이 당신이 찾고 있는 것에 더 가깝습니까?제가 작성한 코딩 예제를 제공할 수 없어서 죄송합니다...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top