1

我有一个简单的问题，我试图在页面加载时禁用 jQuery 按钮

<body>    
    <div id="inDetialContainer" style="display:none;">
       <div id="detailText">Detailed Information</div> 
         <button id="overviewDiv" class="nesteIndtText" href="#"   onClick="loadInnerOfChildPage(1);">Overview</button>    // this button should be disabled when data does not exist  
         <button id="proceduresDiv" class="nesteIndtText" href="#" onClick="loadInnerOfChildPage(2);">Procedures</button> // this button should be disabled when data does not exist  
         <button id="equipmentDiv" class="nesteIndtText" href="#" onClick="loadInnerOfChildPage(3);">Equipment</button>   // this button should be disabled when data does not exist  
         <button id="backgroundDiv" class="nesteIndtText" href="#" onClick="loadInnerOfChildPage(4);">Background</button>  // this button should be disabled when data does not exist  
         <button id="safetyDiv" class="nesteIndtText" href="#" onClick="loadInnerOfChildPage(5);">Safety</button>   // this button should be disabled when data does not exist  
         <button id="examQuestionsDiv" class="nesteIndtText" href="#" onClick="loadInnerOfChildPage(6);">Exam Questions</button>    // this button should be disabled when data does not exist  
   </div>         
    <div id="subContent3" style="display:none;">    
      <div id="normalTextHeader">Equipment Details</div>
          <p class="noData">Content not available.</p>
    </div>
      <script>

      $(document).ready(function()
        {
          parent.parent.loadInnerOfChildPage = loadInner; 
         function loadInner(arg)
        {

        var flag = false;
            var parentId;
        flag = ( $("#subContent"+arg).children('p').hasClass('noData'));

            if(flag == false)
            {
              $("#subContent"+arg).css("display","block");  
              $("#subContent"+arg).siblings(this).css("display","none");
              $("#backToNav").css("display","block");   
              }
             else
              {
             parent.parent.$("#inDetialContainer button #").parent().attr("disabled","disabled"); 
             $("#subContent"+arg).css("display","none");
             $("#subContent"+arg).siblings(this).css("display","none");
             $("#backToNav").css("display","none"); 
                }
             }  
     });
   </script>

加载页面时，如果数据不存在，则应在文档就绪时禁用单击。谁能解释这怎么可能？

谢谢！

4

1 回答 1

0

p所有带有类的孩子的按钮noData都是可点击的，而那些没有的将被禁用，对吧？

$(document).ready(function() {
  $(".nesteIndtText").filter(function() {
    return $(this).children("p.noData").length == 0;
  }).prop("disabled", true);

  $(".nesteIndtText").click(function() {
    // do something when a clickable button is clicked
  });
});

上面使用的.filter()函数将返回其子级中没有 a 的按钮，p.noData然后使用 禁用它们.prop()。

而且我看到您在单击按钮时传递了一个参数，这可能是您使用onClick属性的原因。这可以通过这种方式完成：

<button id="overviewDiv" class="nesteIndtText" href="#" data-arg="1">Overview</button>
<button id="proceduresDiv" class="nesteIndtText" href="#" data-arg="2">Procedures</button>

如您所见，我添加了一个新属性data-arg. 单击按钮时，可以使用处理程序$(this).attr("data-arg")内部获取此值click。

于 2013-04-19T05:45:48.447 回答