如何使html 元素看起来像“禁用”,但传递值?

时间:2022-09-11 19:04:49

When I'm disabling a

当我禁用了

<select name="sel" disabled>
    <option>123</option>
</select>

element, it doesnt pass its variable.

元素,它不传递其变量。

What to do to look it like disabled, but be in "normal" state?

怎么做才能看起来像残疾人,但处于“正常”状态?

This is because I have a list of "selects", and sometimes some of them have single value, so user should understand that it has only one value without clicking it.

这是因为我有一个“选择”列表,有时它们中的一些具有单个值,因此用户应该理解它只有一个值而不点击它。

8 个解决方案

#1


50  

You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.

您可以根据需要禁用它,然后在提交表单之前删除disabled属性。

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.

请注意,如果您依赖此方法,您也希望以编程方式禁用它,因为如果禁用或不支持JS,您将无法使用禁用的选择。

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});

#2


10  

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>   

or you can use jQuery

或者你可以使用jQuery

$("#test option:not(:selected)").prop("disabled", true);

#3


9  

My solution was to create a disabled class in CSS:

我的解决方案是在CSS中创建一个禁用类:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

and then your select would be:

然后你的选择将是:

<select name="sel" class="disabled">
    <option>123</option>
</select>

The user would be unable to pick any values but the select value would still be passed on form submission.

用户将无法选择任何值,但选择值仍将在表单提交时传递。

#4


6  

If you can supply a default value for your selects, then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element, as these don't post a value if left unchecked:

如果您可以为选择提供默认值,则可以对未选中的复选框使用相同的方法,这需要在实际元素之前隐藏输入,因为如果未选中则不会发布值:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

This will actually post the value "default" (without quotes, obviously) if the select is disabled by javascript (or jQuery) or even if your code writes the html disabling the element itself with the attribute: disabled="disabled".

如果通过javascript(或jQuery)禁用了select,或者即使你的代码使用属性禁用元素本身的html,这实际上会发布值“default”(显然没有引号):disabled =“disabled”。

#5


3  

Add a class .disabled and use this CSS:

添加一个.disabled类并使用此CSS:

​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

Demo: http://jsfiddle.net/ZCSRq/

#6


2  

One could use an additional hidden input element with the same name and value as that of the disabled list. This will ensure that the value is passed in $_POST variables.

可以使用与禁用列表具有相同名称和值的其他隐藏输入元素。这将确保该值在$ _POST变量中传递。

Eg:

例如:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

#7


1  

Wow, I had the same problem, but a line of code resolved my problem. I wrote

哇,我有同样的问题,但一行代码解决了我的问题。我写了

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

I send the form to a php script then it prints the correct value for each options while it was "null" before.

我将表单发送到php脚本然后它为每个选项打印正确的值,而之前它是“null”。

Tell me if this works out. I wonder if this only works on mine somehow.

告诉我这是否成功。我想知道这是否只适用于我的某种方式。

#8


0  

if you don't want add the attr disabled can do it programmatically

如果你不想添加attr disabled,可以通过编程方式完成

can disable the edition into the <select class="yourClass"> element with this code:

可以使用以下代码禁用版本到

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

if you want try it can see it here: https://jsfiddle.net/9kjqjLyq/

如果你想尝试它可以在这里看到它:https://jsfiddle.net/9kjqjLyq/

#1


50  

You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.

您可以根据需要禁用它,然后在提交表单之前删除disabled属性。

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.

请注意,如果您依赖此方法,您也希望以编程方式禁用它,因为如果禁用或不支持JS,您将无法使用禁用的选择。

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});

#2


10  

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>   

or you can use jQuery

或者你可以使用jQuery

$("#test option:not(:selected)").prop("disabled", true);

#3


9  

My solution was to create a disabled class in CSS:

我的解决方案是在CSS中创建一个禁用类:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

and then your select would be:

然后你的选择将是:

<select name="sel" class="disabled">
    <option>123</option>
</select>

The user would be unable to pick any values but the select value would still be passed on form submission.

用户将无法选择任何值,但选择值仍将在表单提交时传递。

#4


6  

If you can supply a default value for your selects, then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element, as these don't post a value if left unchecked:

如果您可以为选择提供默认值,则可以对未选中的复选框使用相同的方法,这需要在实际元素之前隐藏输入,因为如果未选中则不会发布值:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

This will actually post the value "default" (without quotes, obviously) if the select is disabled by javascript (or jQuery) or even if your code writes the html disabling the element itself with the attribute: disabled="disabled".

如果通过javascript(或jQuery)禁用了select,或者即使你的代码使用属性禁用元素本身的html,这实际上会发布值“default”(显然没有引号):disabled =“disabled”。

#5


3  

Add a class .disabled and use this CSS:

添加一个.disabled类并使用此CSS:

​.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}​

Demo: http://jsfiddle.net/ZCSRq/

#6


2  

One could use an additional hidden input element with the same name and value as that of the disabled list. This will ensure that the value is passed in $_POST variables.

可以使用与禁用列表具有相同名称和值的其他隐藏输入元素。这将确保该值在$ _POST变量中传递。

Eg:

例如:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

#7


1  

Wow, I had the same problem, but a line of code resolved my problem. I wrote

哇,我有同样的问题,但一行代码解决了我的问题。我写了

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

I send the form to a php script then it prints the correct value for each options while it was "null" before.

我将表单发送到php脚本然后它为每个选项打印正确的值,而之前它是“null”。

Tell me if this works out. I wonder if this only works on mine somehow.

告诉我这是否成功。我想知道这是否只适用于我的某种方式。

#8


0  

if you don't want add the attr disabled can do it programmatically

如果你不想添加attr disabled,可以通过编程方式完成

can disable the edition into the <select class="yourClass"> element with this code:

可以使用以下代码禁用版本到

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

if you want try it can see it here: https://jsfiddle.net/9kjqjLyq/

如果你想尝试它可以在这里看到它:https://jsfiddle.net/9kjqjLyq/