jquery를 사용하여 드롭 다운을 읽기 전용으로 만드는 방법은 무엇입니까?
읽기 전용으로 만들기 위해 다음 문을 사용하고 있지만 작동하지 않습니다.
$('#cf_1268591').attr("readonly", "readonly");
나는 그것을 비활성화하고 싶지 않고 읽기 전용으로 만들고 싶습니다.
$('#cf_1268591').attr("disabled", true);
드롭 다운은 항상 읽기 전용입니다. 당신이 할 수있는 것은 그것을 비활성화하는 것입니다
양식으로 작업하는 경우 비활성화 된 필드는 제출되지 않으므로 숨겨진 필드를 사용하여 비활성화 된 드롭 다운 값을 저장합니다.
나는 같은 문제가 있었고 내 해결책은 선택되지 않은 모든 옵션을 비활성화하는 것이 었습니다. jQuery를 사용하면 매우 쉽습니다.
$('option:not(:selected)').attr('disabled', true);
이것은 당신이 찾고있는 것입니다 :
$('#cf_1268591').attr("style", "pointer-events: none;");
매력처럼 작동합니다.
선택한 값을 비활성화하지 않고 이것을 시도하십시오 ..
$('#cf_1268591 option:not(:selected)').prop('disabled', true);
저 한테는 효과가 있습니다 ..
로 요소를 설정하면 disabled데이터가 제출되지 않지만 select요소에는 readonly.
당신은을 시뮬레이션 할 수 있습니다 readonly에 select탭이 변화를 방지하기 위해 스타일과 JS을 위해 CSS를 사용하여 :
select[readonly] {
background: #eee;
pointer-events: none;
touch-action: none;
}
그런 다음 다음과 같이 사용하십시오.
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
$(i.target).val($(this).attr('data-original-value'));
});
결과:
// Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
$(i.target).val($(this).attr('data-original-value'));
});
});select[readonly] {
background: #eee;
pointer-events: none;
touch-action: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option selected>Example 2</option>
<option>Example 3</option>
</select>필드를 비활성화 할 것입니다. 그런 다음 양식을 제출할 때 비활성화하지 마십시오. 제 생각에는 이것은 숨겨진 필드를 다루는 것보다 쉽습니다.
//disable the field
$("#myFieldID").prop( "disabled", true );
//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
$("#myFieldID").prop( "disabled", false );
});
작업을 단순화하기 위해 번거 로움없이이를 수행하는 jQuery 플러그인이 있습니다. https://github.com/haggen/readonly
선택하지 않은 옵션을 제거하는 간단한 jquery.
$('#your_dropdown_id option:not(:selected)').remove();
이 행은 readonly속성을 읽기 전용 으로 선택 합니다.
$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);
이 코드는 먼저 각 드롭 다운에 원래 선택을 저장합니다. 그런 다음 사용자가 선택을 변경하면 드롭 다운이 원래 선택으로 재설정됩니다.
//store the original selection
$("select :selected").each(function(){
$(this).parent().data("default", this);
});
//change the selction back to the original
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});
나에게 가장 쉬운 옵션은 읽기 전용으로 선택하고 추가하는 것입니다.
onmousedown="return false" onkeydown="return false"
추가 로직을 작성할 필요가 없습니다. 숨겨진 입력이 없거나 비활성화 된 다음 양식 제출시 다시 활성화됩니다.
오래된 기사이지만 찾을 수있는 사람들에게 경고하고 싶습니다. 이름으로 요소가있는 비활성화 된 속성에주의하십시오. 이상하지만 너무 작동하지 않는 것 같습니다.
작동하지 않습니다.
<script language="JavaScript">
function onChangeFullpageCheckbox() {
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>
이 일:
<script language="JavaScript">
function onChangeFullpageCheckbox() {
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>
예, 속성이 아닌 소품을 사용해야한다는 것을 알고 있지만, 적어도 지금은 jquery의 이전 버전 때문에 소품이 작동하지 않으며 이제 업데이트 할 수 없습니다. 이유를 묻지 마십시오. html 차이는 id :. ..
<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>
<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />
...
스크립트에서 오류를 발견하지 못했고 이름이있는 버전에서는 콘솔에 오류가 없었습니다. 그러나 물론 그것은 코드에서 내 실수 일 수 있습니다.
보기 : Win 7 Pro의 Chrome 26
문법이 잘못되어 죄송합니다.
이 작업을 수행하는 더 좋은 방법은 CSS를 사용하여 포인터 이벤트를 제거하고 드롭 다운에서 불투명도를 수정하는 것입니다 (0.5 시도). 이렇게하면 사용자에게 정상적으로 비활성화 된 것처럼 보이지만 여전히 데이터를 게시합니다.
이것은 이전 버전과의 호환성에 몇 가지 문제가 있지만 성가신 비활성화 / 읽기 전용 문제를 해결하는 것보다 더 나은 옵션이라고 생각합니다.
또한 비활성화하고 제출 호출을 활성화하는 순간 활성화 할 수도 있습니다. 나는 가장 쉬운 방법이라고 생각한다 :)
읽기 전용 드롭 다운 같은 것은 없습니다. 할 수있는 일은 각 변경 후 수동으로 첫 번째 값으로 재설정하는 것입니다.
$("select").change(function(event) {
$(this).val($(this).find("option").first().val());
});
"keypress up"시 빈 문자열을 만드십시오.
Html은 다음과 같습니다.
<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">
Jquery는 다음과 같습니다.
$("#cf_1268591").combobox({
url:"your url",
valueField:"id",
textField:"text",
panelWidth: "350",
panelHeight: "200",
});
// 빈 문자열로 키업 후 확인
var tb = $("#cf_1268591").combobox("textbox");
tb.bind("keyup",function(e){
this.value = "";
});
아주 잘 작동합니다
$('#cf_1268591 option:not(:selected)').prop('disabled', true);
이것으로 옵션을 볼 수 있지만 선택할 수 없습니다
이런 식으로 시도해 볼 수 있습니다
function myFunction()
{
$("select[id^=myID]").attr("disabled", true);
var txtSelect = $("select[id^=myID] option[selected]").text();
}
이렇게하면 드롭 다운의 첫 번째 값이 기본값으로 설정되고 읽기 전용으로 보입니다.
html5 지원 :
`
$("#cCity").attr("disabled", "disabled");
$("#cCity").addClass('not-allow');
`
Here is a slight variation on the other answers that suggest using disabled. Since the "disabled" attribute can actually have any value and still disable, you can set it to readonly, like disabled="readonly". This will disable the control as usual, and will also allow you to easily style it differently than regular disabled controls, with CSS like:
select[disabled=readonly] {
.... styles you like for read-only
}
If you want data to be included submit, use hidden fields or enable before submit, as detailed in the other answers.
As @Kanishka said , if we disable a form element it will not be submitted . I have created a snippet for this problem . When the select element is disabled it creates a hidden input field and store the value . When it is enabled it delete the created hidden input fields .
jQuery(document).ready(function($) {
var $dropDown = $('#my-select'),
name = $dropDown.prop('name'),
$form = $dropDown.parent('form');
$dropDown.data('original-name', name); //store the name in the data attribute
$('#toggle').on('click', function(event) {
if ($dropDown.is('.disabled')) {
//enable it
$form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
$dropDown.removeClass('disabled') //remove disable class
.prop({
name: name,
disabled: false
}); //restore the name and enable
} else {
//disable it
var $hiddenInput = $('<input/>', {
type: 'hidden',
name: name,
value: $dropDown.val()
});
$form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field
$dropDown.addClass('disabled') //disable class
.prop({
'name': name + "_1",
disabled: true
}); //change name and disbale
}
});
});/*Optional*/
select.disabled {
color: graytext;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" name="my-form">
<select id="my-select" name="alpha">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>참고URL : https://stackoverflow.com/questions/8100351/how-to-make-a-dropdown-readonly-using-jquery
'your programing' 카테고리의 다른 글
| Node.js에 형식화 된 JSON 쓰기 (0) | 2020.10.08 |
|---|---|
| scrollHeight를 어떻게 결정합니까? (0) | 2020.10.08 |
| Sqlite에서 마지막 기록을 얻는 방법? (0) | 2020.10.08 |
| 날짜 시간을 24 시간 형식으로 변환 (0) | 2020.10.08 |
| 마법이 적은 멋진 미디어 쿼리 (0) | 2020.10.08 |