单击下拉列表时启用当前禁用的下拉列表

Question

这里是场景：我有两个单选按钮，1) 用于普通客户，2) 用于业务合作伙伴，它也有一个下拉控件，这样 X 个业务合作伙伴中的一个可以被选中。选择一个客户类型时，其他部分随着对照的正常禁用，并应用CSS以获得禁用的外观。

我正在努力争取的是，当单选按钮、旁边的标签以及在业务合作伙伴部分的情况下，单击下拉列表时，应该启用该特定部分。我发现的是，当“标签”环绕单选按钮和下拉列表时，当启用相反部分时，它的属性 disabled=true 通过 jQuery，实际上单击下拉列表不会“ t 启用该部分。此外，我认为是正确的下拉列表不会触发 click 事件，因为它的禁用状态设置为 true。我已经尝试使用单选按钮和标签的单击事件，但禁用的下拉列表似乎是一个事件处理黑洞。我正在使用 jQuery 和 Asp.net MVC，但我确信至少在这种情况下 MVC 的相关性。

单选按钮和标签点击事件将通过 IE7 中的禁用下拉列表触发，但不会通过 Firefox3 或 Chrome 浏览器触发。

有什么想法吗？

<label for="CustomerRadio">
 <input id="CustomerRadio" checked="checked" 
        name="usertype" type="radio"
        value="Customer" />Customer
</label> 

<label  for="BusinessPartnerRadio">
  <input id="BusinessPartnerRadio"
         name="usertype" type="radio"
         value="BusinessPartner" />Business Partner
    <select id="businessPartnerType" name="businessPartnerType">
      <option selected="selected" value="Builder">Builder</option>
      <option value="InstallDealer">Install Dealer</option>
      <option value="RepairDealer">Repair Dealer</option>
    </select>
</label>

Answer 1

你说的很对，disabled 属性把选择框变成了一个黑洞。即使是普通的浏览器右键单击 Firefox 上下文菜单也无法对其进行操作。

听起来您的意图是在单击其标签容器时重新启用选择框，那么禁用状态是否只是为了外观？ .. 如果是这样，如果您使用 CSS opacity 使选择框look 禁用会怎样？

<style type="text/css">
  label.disabled select { opacity: 0.6; filter: alpha(opacity=60); }
</style>

<script type="text/javascript">
  $(function() {
    $('div.formdiv').bind('click',function() {
      $('label.disabled',this).removeClass('disabled');
      $('input:radio',this).attr('checked',true);
      $('div.formdiv').not(this).find('label').addClass('disabled').find('select').attr('selectedIndex',0);
    }).find('label').addClass('disabled');
  });
</script>

<div class="formdiv">
 <label for="CustomerRadio">
  <input id="CustomerRadio" checked="checked" name="usertype" type="radio" value="Customer" />Customer
 </label>
</div>

<div class="formdiv">
 <label for="BusinessPartnerRadio">
  <input id="BusinessPartnerRadio" name="usertype" type="radio" value="BusinessPartner" />Business Partner
 </label>
 <label>
  <select id="businessPartnerType" name="businessPartnerType">
   <option selected="selected" value="Builder">Builder</option>
   <option value="InstallDealer">Install Dealer</option>
   <option value="RepairDealer">Repair Dealer</option>
  </select>
 </label>
</div>

测试页面在这里： http://www.carcomplaints.com/test/motowilliams.html

在 FF3 中似乎可以正常工作，我猜 Chrome 浏览器也是如此。不幸的是，在 IE7 中（希望我每次说这话时都能得到一个镍币），如果您直接单击它，选择框会立即失去焦点.. IE 内部的一些东西，似乎与选择对象上的不透明度过滤器更改有关。

侧边栏...暂时忽略您的“禁用”选择框问题：即使您在标签上使用“for=...”语法，我认为其中包含多个表单元素是无效的单个标签标签。如果它是有效的，也许不是一个好主意。整个想法是单击标签内的任意位置将焦点放在链接的表单元素上，因此理论上，您的选择框（这是标签中的第二个表单元素）永远不会获得焦点。 FF3 正确处理了这个问题 - 如果您在不禁用选择框的情况下尝试您的代码，您会看到问题。

希望对您有所帮助。第一张海报建议的 div 覆盖可能是要走的路。我想我只是尝试使用您相同的 HTML 代码的替代解决方案，并进行调整以解决每个标签的多个表单元素问题。

Answer 2

尝试在表单元素的顶部放置一个透明的 div（这对 jQuery 来说应该不会太难），并让该 div 捕获您的鼠标点击。

Answer 3

这是我使用的解决方案here。 基本上，单击控件周围的包装器会导致选择框启用和禁用。由于您的标签包含所有内容，因此不需要额外的标签（除了脚本）。

<script type="text/javascript">
function setCustomer(Customer)
{
    //disable the business controls
    document.getElementById('BusinessPartnerType').disabled = Customer;

    //set the radio button selection
    document.getElementById('cradio').checked = Customer;
    document.getElementById('bradio').checked = !Customer;
}
</script>

<label for="CustomerRadio" id="CustomerLabel" onclick="setCustomer(true);">
    <input id="CustomerRadio" checked="checked" name="usertype" type="radio" value="Customer" id="cradio" />
    Customer
</label> 

<label for="BusinessPartnerRadio" onclick="setCustomer(false);">
    <input id="BusinessPartnerRadio" name="usertype" type="radio" value="BusinessPartner" id="bradio" />
    Business Partner
    <select id="businessPartnerType" name="businessPartnerType" id="businessPartnerType">
        <option selected="selected" value="Builder">Builder</option>
        <option value="InstallDealer">Install Dealer</option>
        <option value="RepairDealer">Repair Dealer</option>
    </select>
</label>

希望这样可以解决问题。