禁用复选框的功能无法正常工作

Question

功能是：选中其中一个复选框时，必须禁用另一个复选框。它正常工作，但在更新WordPress页面并尝试编辑复选框后，我遇到了以下问题：

首先我检查了显示摘录，然后更新了页面，如您所见，有2个框被检查

复选框“

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

这是功能：

function disableContentCheckbox(){
            if (document.getElementById('dx_article_excerpt').checked) {
                document.getElementById("dx_article_content").disabled = true;
            } else {
                document.getElementById("dx_article_content").disabled = false;
            }
        }
        function disableExcerptCheckbox(){
            if (document.getElementById('dx_article_content').checked) {
                document.getElementById("dx_article_excerpt").disabled = true;
            } else {
                document.getElementById("dx_article_excerpt").disabled = false;
            }
        }

为什么会这样？

Answer 1

禁用它时，只需取消选中另一个复选框即可。

我评论了document.getElementById("dx_article_content").disabled = true;只是为了向您展示当您选中一个并单击另一个时的外观。在代码中取消注释它们。

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

<script>
  function disableContentCheckbox() {
    if (document.getElementById('dx_article_excerpt').checked) {
      document.getElementById('dx_article_content').checked = false;
      //document.getElementById("dx_article_content").disabled = true;
    } else {
      document.getElementById("dx_article_content").disabled = false;
    }
  }

  function disableExcerptCheckbox() {
    if (document.getElementById('dx_article_content').checked) {
      document.getElementById('dx_article_excerpt').checked = false;
      //document.getElementById("dx_article_excerpt").disabled = true;
    } else {
      document.getElementById("dx_article_excerpt").disabled = false;
    }
  }
</script>

Answer 2

嗯，我看到它的方式，你有两种选择。

一种方法是在捕获事件时自己更改checked属性。

第二种选择是使用单选按钮。