[javascript] HTML 양식 읽기 전용 SELECT 태그 / 입력

HTML 사양에 따르면 HTML의 select태그에는 readonly속성 이없고 속성 만 disabled있습니다. 따라서 사용자가 드롭 다운을 변경하지 못하게하려면을 사용해야 disabled합니다.

유일한 문제는 비활성화 된 HTML 양식 입력이 POST / GET 데이터에 포함되지 않는다는 것입니다.

태그 의 readonly속성 을 에뮬레이트 select하고 POST 데이터를 얻는 가장 좋은 방법은 무엇입니까 ?

답변

select요소를 유지하면서 동일한 이름과 값으로 disabled숨겨진 다른 요소 를 추가 해야 input합니다.

SELECT를 다시 활성화하면 onchange 이벤트에서 해당 값을 숨겨진 입력에 복사하고 숨겨진 입력을 비활성화 (또는 제거)해야합니다.

데모는 다음과 같습니다.

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);

    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');

    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>

        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

스 니펫 확장

답변

우리는 이것을 사용할 수도 있습니다

선택한 옵션을 제외한 모든 옵션을 비활성화하십시오.

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

이 방법으로 드롭 다운이 계속 작동하고 값을 제출하지만 사용자는 다른 값을 선택할 수 없습니다.

데모

답변

제출시 선택 오브젝트를 다시 사용할 수 있습니다.

편집 : 즉, 일반적으로 select 태그를 비활성화 (disabled 속성 사용) 한 다음 양식을 제출하기 직전에 자동으로 다시 활성화하십시오.

jQuery를 사용한 예 :

비활성화하려면 :

$('#yourSelect').prop('disabled', true);

GET / POST 데이터가 포함되도록 제출하기 전에 다시 활성화하려면 다음을 수행하십시오.
```
$('#yourForm').on('submit', function() {
    $('#yourSelect').prop('disabled', false);
});
```

또한 모든 비활성화 된 입력을 다시 활성화하거나 다음을 선택할 수 있습니다.

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

답변

요소에 대한 readOnly속성을 수행하는 다른 방법은selectcss

당신은 다음과 같이 할 수 있습니다 :

$('#selection').css('pointer-events','none');

데모

답변

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Windows 및 Chrome 용 Safari 3.2.1에서 테스트 및 작동

답변

간단한 jQuery 솔루션

선택에 readonly수업 이있는 경우 사용

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

또는 선택에 readonly="readonly"속성 이있는 경우

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

답변

간단한 CSS 솔루션 :

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

이로 인해 호버에서 “비활성화”커서가 멋진 상태로 선택되어 회색으로
표시되고 옵션 목록이 “비어 있음”을 선택하면 값을 변경할 수 없습니다.