如何在单击某个复选框时禁用特定的复选框？ JavaScript

我想单击复选框时禁用一些复选框。以下是我想要实现：如何在单击某个复选框时禁用特定的复选框？ JavaScript

如果点击注册的更换，停用尊敬的解雇和高考

如果良好的道德证书被点击，禁用Entrace考试

如果大家解雇，禁用文凭，提示请求，CMI请求，高考

如果记录的抄本被点击，禁用提示请求，CMI请求，高考

如果高考，禁用所有

<td><input type = "checkbox"name = "ac_description[]" value = "Replacement_of_Registration" ><b>Replacement of Registration</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;" ></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox"name = "ac_description[]" value = "Good_Moral_Certificate" ><b>Good Moral Certificate</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;" ></center> 
     </tr> 
     </tr> 
      <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "Honorable_Dismissal " ><b>Honorable Dismissal</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;" ></center> 
     </tr> 
     </tr> 
      <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "Transcript_of_Record"><b>Transcript of Record</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "Diploma"><b>Diploma</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "CUE_Request"><b>CUE Request</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "CMI_Request"><b>CMI Request</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "Entrance_Exam"><b>Entrance Exam</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Medical/Dental_Laboratory "><b>School fees-Medical/Dental Laboratory</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Transcript/Honorable"><b>School fees-Transcript/Honorable</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "School_fees-Library"><b>School fees-Library</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 
     <tr> 
      <td><input type = "checkbox" name = "ac_description[]" value = "Affiliation_Fees"><b>Affiliation Fees</b> 
      <td><center><input type="number" name="quantity[]" style="width:60px;"></center> 
     </tr> 

<script language = "JavaScript"> 
$("input[type='checkbox']").click(function(){ 
    var val = $(this).attr('value'); 
    switch(val) { 
    case 'Replacement_of_Registration': 
    if($(this).is(':checked')) 
     $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',true); 
    else 
     $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled',false); 
    break; 
    case 'Good_Moral_Certificate': 
    if($(this).is(':checked')) 
     $("input[value='Entrance_Exam']").prop('disabled',true); 
    else 
     $("input[value='Entrance_Exam']").prop('disabled',false); 
    break; 
    case 'Honorable_Dismissal ': 
    if($(this).is(':checked')) 
     $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true); 
    else 
     $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false); 
    break; 
    case 'Transcript_of_Record': 
    if($(this).is(':checked')) 
     $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',true); 
    else 
     $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled',false); 
    break; 
    case 'Entrance_Exam': 
    if($(this).is(':checked')) 
     $("input[name='ac_description[]']").not(this).prop('disabled',true); 
    else 
     $("input[name='ac_description[]']").not(this).prop('disabled',false); 
    break; 
}); 

$('.class_name').each(function(){ 
$this.onClick(function(){ 
if($(this).is(':checked')){ 
    $('.class_name').each(function(){ 
    if($(this).not(':checked')){ 
     $(this).prop('disabled', true); 
    } 
    }) 
} 
</script>

来源

2017-09-13 Joana Clariz Jacinto

'$ this.onClick（function（）{}）'有一些错误，'$ this'是什么，它有'onclick'函数。 – JiangangXiong

@cale_b这不是英语堆栈，'想'是一个被广泛接受和理解的俚语，它几乎使它成为一个字。 –

DOM事件准备就绪后，您的点击事件需要注册。

$(document).ready(function() { 
//Your JS goes here. 
});

我已经测试你的代码的jQuery文档准备内部更新时，它工作正常（除了少数大括号和右括号丢失）。

$(document).ready(function() { 
    $("input[type='checkbox']").click(function() { 
     var val = $(this).attr('value'); 
     switch (val) { 
      case 'Replacement_of_Registration': 
       if ($(this).is(':checked')) 
        $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', true); 
       else 
        $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', false); 
       break; 
      case 'Good_Moral_Certificate': 
       if ($(this).is(':checked')) 
        $("input[value='Entrance_Exam']").prop('disabled', true); 
       else 
        $("input[value='Entrance_Exam']").prop('disabled', false); 
       break; 
      case 'Honorable_Dismissal ': 
       if ($(this).is(':checked')) 
        $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true); 
       else 
        $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false); 
       break; 
      case 'Transcript_of_Record': 
       if ($(this).is(':checked')) 
        $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true); 
       else 
        $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false); 
       break; 
      case 'Entrance_Exam': 
       if ($(this).is(':checked')) 
        $("input[name='ac_description[]']").not(this).prop('disabled', true); 
       else 
        $("input[name='ac_description[]']").not(this).prop('disabled', false); 
       break; 
     } 
    }); 

    $('.class_name').each(function() { 
     $this.on('click', function() { 
      if ($(this).is(':checked')) { 
       $('.class_name').each(function() { 
        if ($(this).not(':checked')) { 
         $(this).prop('disabled', true); 
        } 
       }) 
      } 
     }); 
    }); 
});

来源

2017-09-13 02:47:09

Jutt做了一些清楚的事情：$（function（）{...}）; DOM准备就绪，而不是onLoad，这是一个不同的事件。 – Reflective

先解决你的HTML结构，所以你没有多余的标签挂我们未被关闭或离开开封

下面

是解决方案。你错过了大量的右括号和右括号

最后jQuery只有一个点击方法不是一个onClick方法...运行你的代码通过一个简单的网站来验证你的HTML，因为它似乎你仍然在这里学习是official W3C standard that it will validate你可以做到这一点

<!DOCTYPE html> 
<html> 

<head> 
    <title>checkbox removal</title> 
</head> 

<body> 
    <td><input type="checkbox" name="ac_description[]" value="Replacement_of_Registration"><b>Replacement of Registration</b> 
     <td> 
      <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Good_Moral_Certificate"><b>Good Moral Certificate</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Honorable_Dismissal "><b>Honorable Dismissal</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Transcript_of_Record"><b>Transcript of Record</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Diploma"><b>Diploma</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="CUE_Request"><b>CUE Request</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="CMI_Request"><b>CMI Request</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Entrance_Exam"><b>Entrance Exam</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="School_fees-Medical/Dental_Laboratory "><b>School fees-Medical/Dental Laboratory</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="School_fees-Transcript/Honorable"><b>School fees-Transcript/Honorable</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="School_fees-Library"><b>School fees-Library</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 
      <tr> 
       <td><input type="checkbox" name="ac_description[]" value="Affiliation_Fees"><b>Affiliation Fees</b> 
        <td> 
         <center><input type="number" name="quantity[]" style="width:60px;"></center> 
      </tr> 


      <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
      <script type="text/javascript"> 
       $("input[type='checkbox']").click(function() { 
        var val = $(this).attr('value'); 
        switch (val) { 
         case 'Replacement_of_Registration': 
          if ($(this).is(':checked')) 
           $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', true); 
          else 
           $("input[value='Honorable_Dismissal '], input[value='Entrance_Exam']").prop('disabled', false); 
          break; 
         case 'Good_Moral_Certificate': 
          if ($(this).is(':checked')) 
           $("input[value='Entrance_Exam']").prop('disabled', true); 
          else 
           $("input[value='Entrance_Exam']").prop('disabled', false); 
          break; 
         case 'Honorable_Dismissal ': 
          if ($(this).is(':checked')) 
           $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true); 
          else 
           $("input[value='Diploma'], input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false); 
          break; 
         case 'Transcript_of_Record': 
          if ($(this).is(':checked')) 
           $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', true); 
          else 
           $("input[value='CUE_Request'], input[value='CMI_Request'], input[value='Entrance_Exam']").prop('disabled', false); 
          break; 
         case 'Entrance_Exam': 
          if ($(this).is(':checked')) 
           $("input[name='ac_description[]']").not(this).prop('disabled', true); 
          else 
           $("input[name='ac_description[]']").not(this).prop('disabled', false); 
          break; 
         default: 
          break; 
        } 
       }); 

       $('.class_name').each(function() { 
        $this.click(function() { 
         if ($(this).is(':checked')) { 
          $('.class_name').each(function() { 
           if ($(this).not(':checked')) { 
            $(this).prop('disabled', true); 
           } 
          }) 
         } 
        }); 
       }); 
      </script> 
</body> 

</html>

来源

2017-09-13 02:54:08 Andrei

那么，Joan作为名字和图片展示......是一个女人，所以'很多错误该死的男人'是不正确的，我认为;） – Reflective

@反射公平足够的，直到阅读后才意识到，但人也确实提到一个*人* [4a]（http： //www.learnersdictionary.com/definition/man） – Andrei

我说'正确' - 请在字典中检查它;） – Reflective

的一种方法是，因为你已经知道要禁用的复选框，点击后可以肯定的是，给复选框一个数据禁用属性和值要禁用的复选框，

看看这个例子..只需点击第一个车ckbox尝试

https://jsfiddle.net/xw23ks5n/1/

<input type="checkbox" name="ac_description[]" data-disable="Honorable_Dismissal,Entrance_Exam" value="Replacement_of_Registration"><b>Replacement of Registration</b>

值是ID（这是我给了其他复选框）

<input type="checkbox" name="ac_description[]" value="Honorable_Dismissal" id="Honorable_Dismissal"> 
<input type="checkbox" name="ac_description[]" value="Entrance_Exam" id="Entrance_Exam"><b>Entrance Exam</b>

，然后你只需要这个通用功能禁用复选框

$("input[type='checkbox']").click(function(){ 
$("input[type='checkbox']").each(function(){ 
    $(this).prop('disabled',false); 
    }); 
if($(this).is(":checked")){ 

    var checkboxesToDisableList = $(this).data('disable').split(','); 
    $.each(checkboxesToDisableList, function() { 
    var id = "#"+this; 
     $(id).prop('disabled',true); 
    }); 
} 
});

希望这会有帮助

来源

2017-09-13 02:56:27 Sameer

优秀的建议！ –

如何在单击某个复选框时禁用特定的复选框？ JavaScript

回答

相关问题