Question

我有一个大的表单，除了标签，对于某些角色（在管理员权限下）我给他们看表单，但我不允许他们改变任何东西，所以当具有该管理员权限的用户被记录时，我设置字段集已禁用。问题是我的标签也被锁定，所以他们只能看到第一个标签而无法点击其他标签..

我需要一种方法来只启用fieldset中禁用的标签。

我可以在JS的帮助下手动将每个字段设置为禁用/启用但是我希望使用更少的代码，所以如果css可以使用它会很好..？

我尝试只设置了禁用=＆＃34; false＆＃34; （null，我所遇到的一切，但它不起作用）

Answer 1

你应该删除已禁用的属性并使＆＃34; a＆＃34;标签不可点击。

指针 - 事件：没有人会做的伎俩

    HTML

    <fieldset>


    <div id="tabs">
      <ul>
        <li><a id="one" href="#tabs-1">Nunc tincidunt</a></li>
        <li><a id="two" href="#tabs-2">Proin dolor</a></li>
        <li><a id="three" href="#tabs-3">Aenean lacinia</a></li>
     </ul>
       <div id="tabs-1">
          <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
     </div>
        <div id="tabs-2">
          <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
      </div>
        <div id="tabs-3">
         <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
         <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
      </div>
       </div>
   </fieldset>



   JAVASCRIPT

  $(function() {
       $( "#tabs" ).tabs();
     });

Answer 2

如果我理解正确，你可以使用以下几行：

<fieldset disabled class="bunch-a-tabs">
  <ul class="tabs">
    <li class="tab tab-control" href="#tab1">Tab 1</li>
    <li class="tab tab-control" href="#tab2">Tab 2</li>
  </ul>
  <div class="tab tab-content" id="tab1">
     <!-- tab 1 content -->
  </div>
  <div class="tab tab-content" id="tab2">
     <!-- tab 2 content -->
  </div>
</fieldset>

..虽然您确实希望禁止每个标签的内容进行交互，但您希望标签控件处于活动状态。

您是否可以使用fieldset包装每个标签的内容？

<div class="bunch-a-tabs">
  <ul class="tabs">
    <li class="tab tab-control" href="#tab1">Tab 1</li>
    <li class="tab tab-control" href="#tab2">Tab 2</li>
  </ul>
  <div class="tab tab-content" id="tab1">
    <fieldset disabled>
      <!-- tab 1 content -->
    </fieldset>
  </div>
  <div class="tab tab-content" id="tab2">
    <fieldset disabled>
      <!-- tab 2 content -->
    </fieldset>
  </div>
</div>

字段集已禁用

2 个答案: