Question

基本上我希望用户只选择其中一个字段，所以要么是，要么在任何情况下都不是。

如何编写Jquery代码，以便在其中任何一个更改为默认值时，其他字段是隐藏还是禁用？

由于

以下是我的两个选择字段：

<div class="control-group" id="sel1">
  <%= f.label "Assigne", :class => 'control-label' %>
  <div class="controls" id="sel1">
    <%= f.select(:user_id,  [['Team', 0]] + User.all.collect { |p| [p.email, p.id]}, :id => 'sel1') %>
  </div>
</div>
<div class="control-group">
  <%= f.label "Team", :class => 'control-label' %>
  <div class="controls">
    <%= f.select(:team_id,  [['Department', 0]] + Team.all.collect { |p| [p.name, p.id]}, :id => 'sel2') %>
  </div>
</div>

编辑：

我能够自己写这个：

<script>
  $(function(){
    $('#sel1').on('change',
    function(){
     if ($('#sel1').has('option').length > 5)
      {
        $('#sel2').hide();
      }
     else
      {
        $('#sel2').show();
      }
    })
  });
</script>

但它不起作用，它只能这样：

<script>
  $(function(){
    $('#sel1').on('change',
    function(){
        $('#sel2').hide();
    })
  });
</script>

但就此而言，我再也没有表现出来，如果场地被尊重的话。

有什么想法吗？

Answer 1

你需要这样的东西：

$('#sel1').on('change',
    function(){
     if ($('#sel1').find('option:selected').val() !== "")
      {
        $('#sel2').hide();
      }
     else
      {
        $('#sel2').show();
      }
    });

这是html来源：

<body>
<select id="sel1">
  <option val=""></option>
  <option val=0>0</option>
  <option val=1>1</option>
</select>

<select id="sel2">
  <option val=""></option>
  <option val=0>0</option>
  <option val=1>1</option>
</select>

</body>

您可以在此处观看此操作：http://jsbin.com/bigasitibe/2/edit

Answer 2

这假设您在页面上没有任何其他选择。如果你这样做，可以在父div中添加类似mutually-exclusive-select之类的类。

$ ->
  $selects = $('select') # or something more specific
  $selects.on 'change', ->
    $el = $(@)
    if $el.val().length
      $selects.not('#' + $el.attr('id')).attr('disabled', 'disabled')
    else 
      $selects.removeAttr('disabled')

在rails应用程序上使用jQuery隐藏和显示（或禁用启用）选择字段

2 个答案: