<select> 양식 필드가 비활성화되었을 때 제출되도록하는 방법은 무엇입니까?


180

나는이 select내가 값을 수정할 수있는 사용자와 같이, "읽기 전용"으로 표시 할 것을 양식 필드를하지만, 값은 여전히 양식 제출됩니다. disabled속성을 사용하면 사용자가 값을 변경할 수 없지만 양식과 함께 값을 제출하지는 않습니다.

readonly속성은 inputtextarea필드 에서만 사용할 수 있지만 기본적으로 내가 원하는 것입니다. 그 일을 할 수있는 방법이 있습니까?

내가 고려하고있는 두 가지 가능성은 다음과 같습니다.

  • 대신 비활성화의 select,의 비활성화 모두 option의 사용 CSS는 회색으로하는 그것의 불가능처럼 보이는 있도록 선택합니다.
  • 클릭 이벤트 핸들러를 제출 단추에 추가하여 양식을 제출하기 전에 사용 불가능한 드롭 다운 메뉴를 모두 사용할 수있게하십시오.

2
늦게 참여해서 죄송하지만 @ trafalmadorianworkest가 제공하는 솔루션 이 가장 좋습니다. 선택되지 않은 모든 입력을 비활성화합니다. 선택에 여러 옵션이 활성화되어 있으면 작동합니다. $('#toSelect')find(':not(:selected)').prop('disabled',true);
Abhishek Madhani

또는 UI에서 컨트롤을 비활성화 된 상태로두고 액션 메서드에서 값을 검색 할 수 있습니다. public ActionResult InsertRecord (MyType model) {if (model.MyProperty == null) {model.MyProperty = Request [ "MyProperty"]; }}
beastieboy

답변:


118
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

select_name일반적으로 이름을 제공하는 이름은 어디에 있습니까 <select>?

다른 옵션.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

이제이 하나를 사용하면 사용중인 웹 서버에 따라 hidden입력을 입력하기 전에 또는 후에 입력 해야 할 수도 있습니다 <select>.

IIS를 사용하여 메모리가 제대로 작동하면 이전에 메모리를 배치하고 Apache를 사용하면 메모리를 나중에 배치합니다. 항상 그렇듯이 테스트가 핵심입니다.


3
이것은 웹 서버 에 어떻게 의존 합니까? 선택 필드를 사용하여 페이지를 렌더링 하는 클라이언트 가 아니므로 값이 서버로 전송되는지 여부를 결정 하는 클라이언트 와 같은 충돌이 발생 합니까?
Ilari Kajaste

8
서버가 동일한 이름으로 여러 입력을 처리하는 방법에 따라 다릅니다.
Jordan S. Jones

1
특정 서버 유형에 의존하지 않는 것이 좋습니다. 따라서 첫 번째 접근 방식이 더 깨끗하고 오류가 덜 발생한다고 생각합니다.
Luke

5
@ 요르단 : 브라우저는 비활성화 된 필드 값을 서버로 보내지 않으므로 서버 측에서 처리하려고 할 때 비어 있습니다. 원하는 값의 숨겨진 필드가 있고 보이는 필드가 비활성화 된 경우 숨겨진 필드 만 서버로 전송됩니다. Ergo, 숨겨진 필드는 보이는 필드가 비활성화되고 우선 순위 문제가 없을 때만 JS 또는 서버 측 코드를 통해 작성해야합니다.
Matt van Andel

1
이것은 자바 스크립트없이 작동하는 양식이 필요한 경우에만 옵션입니다.
앤드류

224

필드를 비활성화 한 다음 양식을 제출하기 전에 활성화하십시오.

jQuery 코드 :

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

15
아주 좋은 해결책입니다!
Chris

2
이것은 내가 가장 눈에 띄지 않기 때문에 내가 정한 것입니다.
Jonathan

3
'체크'에 대한 jQuery를 워드 프로세서 대신 .attr의 '장애인' '선택'과 .prop 및 .removeProp을 사용하는 것이 좋습니다 및 .removeAttr는 http://api.jquery.com/prop/ 참조
짐 베리

2
@JimBergman의 논평의 관련 비트- "속성은 일반적으로 직렬화 된 HTML 속성을 변경하지 않고 DOM 요소의 동적 상태에 영향을줍니다. 예를 들어 입력 요소의 value 속성, 입력 및 단추의 비활성화 된 속성 또는 확인란의 checked 속성이 있습니다. .attr () 메소드 대신 .prop () 메소드를 사용하여 disabled 및 checked를 설정해야합니다. 값을 가져오고 설정하는 데 .val () 메소드를 사용해야합니다. " -에서 api.jquery.com/prop
여호수아 댄스

2
당신은 천재입니다 (Y)
TommyDo

13

나는 이것을위한 해결책을 찾고 있었고,이 스레드에서 해결책을 찾지 못했기 때문에 나는 내 자신을했다.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

간단하게, 당신이 초점을 맞출 때, 필드를 비활성화하는 것과 같이 필드를 흐리게하지만 실제로 데이터를 보냅니다.


와우 위대하고 쉬운 솔루션. 감사합니다 .. +1 :)
Naeem Ul Wahhab

나는 이것을 매우 좋아한다. 내 형태의 상호 작용에 따라 요소가 앞뒤로 활성화 / 비활성화됩니다 ...이 시나리오에서 '흐리게'필드를 다시 활성화하는 방법은 무엇입니까?
bkwdesign 2011

인터넷 검색에서 $ ( '# selectbox'). off ( 'focus'); 다시 활성화하는 트릭을 수행합니다
bkwdesign

2
텍스트 상자에서 작동, 선택 상자에서 작동하지
Andrew

7

사용자가 이전 선택 상자를 기반으로 선택한 값을 변경할 수 없도록하기 위해 약간 다른 시나리오에 직면했습니다. 내가했던 것은 선택 상자에서 다른 모든 선택되지 않은 옵션을 사용 중지하는 것입니다.

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

고마워, 나는 가장 논리적으로 당신을 발견했습니다. 그러나 다음과 같이 attr변경되어야합니다.prop$('#toSelect')find(':not(:selected)').prop('disabled',true);
Abhishek Madhani

6

jQuery를 사용하지 않고 Tres가 제안한 동일한 솔루션

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

이것은 누군가가 더 많은 것을 이해하는 데 도움이 될 수 있지만 분명히 jQuery보다 덜 유연합니다.


그러나 여러 선택기에 좋지 않습니다. 사용할 수 getElementsByTagName('select')있을까요?
Lucky

6

선택 필드의 : input selector와 함께 작동하지 않습니다.

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

5

선택에서 비활성화 옵션으로 다음 코드를 사용합니다.

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

4

내가 찾은 가장 쉬운 방법은 양식에 묶인 작은 자바 스크립트 함수를 만드는 것입니다.

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

그리고 당신은 여기에 당신의 형태로 그것을 부릅니다 :

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

또는 양식을 확인하는 데 사용하는 함수에서 호출 할 수 있습니다 :)


4

제출하기 전에 줄을 추가하십시오.

$ ( "# XYZ"). removeAttr ( "disabled");


2

또는 일부 JavaScript를 사용하여 선택 이름을 변경하고 사용 안함으로 설정하십시오. 이렇게하면 선택이 계속 제출되지만 확인하지 않는 이름을 사용합니다.


2

입력이 비활성화되어있는 동안 데이터 필드에 값을 저장하는 빠른 (Jquery 전용) 플러그인을 채웠습니다. 이것은 필드가 .prop () 또는 .attr ()을 사용하여 jquery를 통해 프로그래밍 방식으로 비활성화되어있는 한 .val (), .serialize () 또는 .serializeArra ()로 값에 액세스하면 항상 비활성화 된 경우에도 값 :)

뻔뻔한 플러그 : https://github.com/Jezternz/jq-disabled-inputs


2

Jordan의 솔루션을 기반으로, 유효하지 않은 선택과 동일한 이름과 동일한 값으로 숨겨진 입력을 자동으로 만드는 함수를 만들었습니다. 첫 번째 매개 변수는 id 또는 jquery 요소 일 수 있습니다. 두 번째는 "true"가 비활성화되고 "false"가 입력을 활성화하는 부울 선택적 매개 변수입니다. 생략하면 두 번째 매개 변수는 "enabled"와 "disabled"사이에서 선택을 전환합니다.

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

'obj'매개 변수는 jquery 객체 여야합니다
Doglas

1

실행 가능한 해결책을 찾았습니다. 선택한 것을 제외한 모든 요소를 ​​제거하십시오. 그런 다음 스타일을 비활성화 된 것으로 변경할 수도 있습니다. jQuery 사용하기 :

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

0
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

-8

또 다른 옵션은 readonly 속성을 사용하는 것입니다.

<select readonly="readonly">
    ....
</select>

읽기 전용으로 값이 계속 제출되면 입력 필드가 회색으로 표시되어 사용자가 편집 할 수 없습니다.

편집하다:

http://www.w3.org/TR/html401/interact/forms.html#adef-readonly 에서 인용 :

  • 읽기 전용 요소는 포커스를 받지만 사용자가 수정할 수는 없습니다.
  • 탭 탐색에는 읽기 전용 요소가 포함되어 있습니다.
  • 읽기 전용 요소가 성공했을 수 있습니다.

요소가 성공했다고 표시되면 여기에 명시된대로 제출할 있음을 의미합니다 . http://www.w3.org/TR/html401/interact/forms.html#successful-controls


6
컨트롤이 회색으로 표시되지 않고 사용자가 편집 할 수 있습니다. 전체 섹션을 읽지 못했습니다. "다음 요소는 읽기 전용 특성 인 INPUT 및 TEXTAREA를 지원합니다."
Carlos Rendon

3
나는 이것이 오래된 대답이라는 것을 알고 있지만 실제로 작동합니다. 많은 다운 보트의 이유를 모르겠습니다.
Ze Luis
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.