레이블 시뮬레이션 버튼 클릭 클릭

Question

제발 버튼을 클릭하면 레이블 시뮬레이션을 돕는 데 도움이 필요합니다. 레이블을 단추와 동일한 크기로 만들려고 했으므로 단추를 클릭하면 내 체크 상자를 체크 한 다음 자바 스크립트를 사용하여 단추를 클릭 할 때 레이블 클릭을 시뮬레이션 해 보았습니다. 문제는 내 레이블 크기가 내 단추 안에 작아서 확인할 레이블 내부를 클릭해야한다는 것입니다. 내가 어떻게 내 레이블 같은 크기를 얻을 수

{%- block checkbox_widget -%} 

<button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" id="button" onclick="myFunction()" style="margin-bottom:2%;"> 
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> 
    <label for="{{ id }}" class="white-text" style="font-size: 22px;" id="check">{{ label|trans({}, translation_domain) }}</label> 
</button> 

<script> 
    function myFunction() { 
     buttn = document.getElementById("check"); 
     buttn.click(); 
    } 
</script> 
{%- endblock checkbox_widget -%} 

누군가 내 자바 스크립트를 수정하거나 말씀 해주십시오 수있는 다음과 같은 수정 + 스크립트를 사용하여 시도

{%- block checkbox_widget -%} 
<button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" style="margin-bottom:2%;"> 
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> 
    <label for="{{ id }}" class="white-text" style="font-size: 22px;">{{ label|trans({}, translation_domain) }}</label> 
</button> 
{%- endblock checkbox_widget -%} 

{%- block radio_widget -%} 
<button class="btn-large waves-effect waves-light {% if checked %}disabled{%endif %}" style="margin-bottom:2%;"> 
    <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> 
    <label for="{{ id }}" class="white-text" style="font-size: 22px;">{{ label|trans({}, translation_domain) }}</label> 
</button> 
{%- endblock radio_widget -%} 

:

이 내 HTML 파일입니다 내 버튼으로. 사전에 내 영어 감사 :

Answer 1

{%- block checkbox_widget -%} 

     <button class="btn-large waves-effect waves-light {% if checked %}disabled{% endif %}" id="button" onclick="myFunction()" style="margin-bottom:2%;"></button> 
     <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} /> 
     <label for="{{ id }}" class="white-text" style="font-size: 22px;" id="check">{{ label|trans({}, translation_domain) }}</label> 


    <script> 
    function myFunction() { 
    buttn = document.getElementById("check"); 
    buttn.click(); 
    } 
</script> 
    {%- endblock checkbox_widget -%} 

죄송 보십시오이

Answer 2

첫째 : 당신이 페이지에 이러한 위젯 중 하나 이상을 가하고 있습니다? 그렇다면 id은 단일 요소에 고유해야하므로 예상대로 작동하지 않습니다.

두 번째 : 레이블이 for 속성을 통해 확인란에 연결되어 있기 때문에 레이블을 클릭하면 JS가 클릭을 보내면 아무 일도 일어나지 않은 것으로 보입니다. 그러면 라벨이 '실행 취소 중입니다. "그것. 여기를 참조하십시오 : https://jsfiddle.net/q1vour7v/ 레이블을 클릭 한 다음 라벨에서 가장자리를 클릭하십시오. 이 버전에서

는 레이블이 체크 박스에 연결되지 않고, 예상대로 작동 : https://jsfiddle.net/q1vour7v/1/