2016-07-30 4 views
1

URL을 확인한 다음 체크 박스가 선택 상태인지 확인해야합니다. 이는 장식용이며 체크 박스를 클릭 할 수 없습니다.소품이 false 일지라도 체크 박스가 계속 표시됩니다.

<input 
    type="checkbox" 
    checked={inCurrentFilters({ key: bucket.key, dotField, currentFilters })} 
/> 
{inCurrentFilters({ key: bucket.key, dotField, currentFilters }) ? 'true' : 'false'} 

inCurrentFilters 반환 true은 체크 박스를 체크하고 옆에 true를 말합니다됩니다. 그런 다음 false을 반환하면 확인란의 선택 상태가 유지되고 값은 false이라고 표시됩니다. 뭐라 구요?

enter image description here

답변

1

자신의 솔루션이이를 해결하는 가장 간단한 방법입니다. 렌더링하는 확인란은 입력 요소이므로 기본적으로 사용자가 클릭 할 수 있습니다. 입력으로 사용하지 않으므로 pointer-events: none 트릭을 수행합니다.

사용자 환경의 관점에서 보면 disabled 확인란을 선택하거나 다르게 보이는 2 개의 아이콘을 사용하는 것이 좋습니다.

기본 체크 박스를 표시하면 본질적으로 사용자가 확인란을 클릭 할 수 있다고 말합니다.

+0

우리는 체크 박스 대신 아이콘을 사용 했었지만 체크 박스 입력 요소로 바꿨습니다. 분명히 어떤 사람들은 CSS를 끄고 여전히 사이트를보고 싶어했기 때문에 멋진 글꼴이 나타나지 않았을 것입니다. – azium

+0

나는 본다. '무능한'은 또한 css없이 간계를 할 것이다, 그러나 맛의 사정이다. – wintvelt

0

그래서 .. 흥미롭게도, 그것은 는 클릭하고 있었고, 난 그것을 클릭하여 기능 상태를 무시했다. 나는 pointerEvents: none을 추가했다. 이 방법으로 문제가 해결되지만 더 좋은 방법이 있습니까?

관련 문제