当＆＃34;按下键时，尝试制作空字符串＆＃34;

Question

我使用以下语句使其只读，但它无法正常工作。

$('#cf_1268591').attr("readonly", "readonly");

我不想让它被禁用，我想让它成为只读。

Answer 1

$('#cf_1268591').attr("disabled", true);

下拉列表始终是只读的。您可以做的是禁用它

如果您使用表单，则禁用的字段不会提交，因此请使用隐藏字段存储已禁用的下拉列值

Answer 2

我有同样的问题，我的解决方案是禁用未选中的所有选项。使用jQuery很容易：

$('option:not(:selected)').attr('disabled', true);

Answer 3

试试这个...而不禁用所选的值..

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

对我有用..

Answer 4

这就是你要找的东西：

$('#cf_1268591').attr("style", "pointer-events: none;");

像魅力一样。

Answer 5

使用disabled设置元素不会提交数据，但select个元素没有readonly。

您可以使用CSS在readonly上模拟select样式，使用JS来阻止使用标签进行更改：

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>

Answer 6

我禁用了该字段。然后，当表单提交时，使其不被禁用。在我看来，这比处理隐藏字段更容易。

//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 );
});

Answer 7

为了简化这里的事情，jQuery插件可以毫不费力地执行此操作：https://github.com/haggen/readonly

Answer 8

此代码将首先在每个下拉列表中存储原始选择。然后，如果用户更改选择，则会将下拉菜单重置为其原始选择。

http://jsfiddle.net/4aHcD/22/

//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);
});

Answer 9

此行选择readonly属性为只读：

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

Answer 10

简单的jQuery删除未选中的选项。

$('#your_dropdown_id option:not(:selected)').remove();

Answer 11

我发现，更好的方法是使用CSS删除指针事件并修改下拉列表中的不透明度（尝试0.5）。这使用户看起来像正常一样被禁用，但仍会发布数据。

虽然这有一些向后兼容性的问题，但在我看来比绕过讨厌的禁用/只读问题更好。

Answer 12

您也可以将其禁用，并在您启用提交通话时启用它。我认为这是最简单的方法：）

Answer 13

对我来说，最简单的选择是将select设置为只读并添加：

for file in arr:

    command = "%s -s%s/run_one_test.csh K:/tests/%s %s" % (INCAM_PATH, "K:/", file, VERSION)
    p = subprocess.Popen(command, stdout=subprocess.PIPE, encoding='utf8')

您不需要编写任何额外的逻辑。没有隐藏的输入或已禁用，然后在表单提交时重新启用。

Answer 14

此处与其他建议使用禁用的答案略有不同。由于“ disabled”属性实际上可以具有任何值并且仍然禁用，因此您可以将其设置为readonly，例如disabled =“ readonly”。这将像往常一样禁用该控件，并且还允许您使用类似于CSS的常规禁用控件轻松设置其样式，例如：

select[disabled=readonly] {
    .... styles you like for read-only
}

如果要包含数据，请提交，请使用隐藏字段或在提交前启用，如其他答案所述。

Answer 15

没有只读下拉菜单。您可以做的是在每次更改后手动将其重置为第一个值。

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

Answer 16

html5支持：

`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

`

Answer 17

也许你可以尝试这种方式

Items[i].bindProperty("title", "NewProposalTitle_EN");

这会将下拉列表的第一个值设置为默认值，而且似乎只读

Answer 18

工作得很好

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

有了这个，我可以看到选项，但我无法选择它

Answer 19

正如@Kanishka所说，如果我们禁用表单元素，它将不会被提交。我已经为这个问题创建了一个片段。禁用select元素时，它会创建一个隐藏的输入字段并存储该值。启用后，它将删除创建的隐藏输入字段。

More info

＆＃13;

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 
    }
  });
});

＆＃13;

/*Optional*/

select.disabled {
  color: graytext;
}

＆＃13;

<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>

＆＃13;

Answer 20

当＆＃34;按下键时，尝试制作空字符串＆＃34;

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 = "";
});

Answer 21

这是一篇旧文章，但我想警告那些会找到它的人。使用按名称获取元素时要小心禁用属性。奇怪，但似乎没有太多的工作。

这不起作用：

<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>

是的，我知道我最好应该使用道具而不是attr，但至少现在道具不会因为旧版本的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

抱歉语法不好。

如何使用jquery只读取下拉列表？

21 个答案:

当＆＃34;按下键时，尝试制作空字符串＆＃34;