Question

我有一个简单的问题，我试图在页面加载时禁用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>

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

谢谢！

Answer 1

所有p孩子的班级为noData的按钮都是可点击的，而那些没有{@ 1}}的孩子会被点击，对吗？

$(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()函数会返回其子项中没有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获取此值。

如果没有单击其上的数据，请禁用该按钮。这应该发生在文件就绪上

1 个答案: