Question

以下是方案：我有两个单选按钮，1）面向普通客户，2）业务合作伙伴也有下拉控件，以便X个业务合作伙伴中的一个可以被选中。当选择一个客户类型时，另一个部分会变暗，正常禁用控件并应用CSS以获得禁用的外观。

我正在努力的是，当单选按钮，标签旁边，以及在业务伙伴部分的情况下，单击下拉列表时，该特定部分应该被启用。我发现的是当'Label for'被包围在单选按钮和下拉列表中时，当启用相反的部分时，通过jQuery将其属性禁用= true，实际上单击下拉列表并不是' 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

你是绝对正确的，被禁用的财产将选择框变成黑洞。即使是普通的浏览器右键单击Firefox上下文菜单也无效。

听起来你的意图是在点击标签容器时重新启用选择框，为了外观的缘故，禁用状态是什么？ ..如果是这样，如果使用CSS不透明度使外观禁用了选择框会怎样？

<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＆amp ;;我也猜测Chrome浏览器。不幸的是在IE7中（希望我每次说的都有镍），如果你直接点击它，选择框会立即失去焦点.IE内部的东西，与选择对象上的不透明度滤镜相关，似乎。 / p>

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

希望有所帮助。第一张海报建议的div叠加可能是要走的路。我以为我只是尝试使用相同的HTML代码替代解决方案，调整以修复每个标签的多个元素元素问题。

Answer 2

尝试在表单元素的顶部放置一个透明div（使用jQuery这不应该太难），并使div捕获鼠标单击。

Answer 3

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

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

3 个答案: