How to Make a Checkbox Checked and Disabled

function enableDisableAll(e) {        var own = e;        var form = document.getElementById("myForm");        var elements = form.elements;
    for (var i = 0 ; i < elements.length ; i++) {          if(own !== elements[i] ){                      if(own.checked == true){                            elements[i].disabled = true;                           }else{                          elements[i].disabled = false;              }                     }
     }    }
function clearAll(){ document.getElementById("myForm").reset();}

<form id="myForm">
    Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll(this);" />    <input type="text" id="id1" name="name1" /><br>
    Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll(this);" />    <input type="text" id="id2" name="name2" /><br>
    Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll(this);" />    <input type="text" id="id3" name="name3" /><br>    
</form>
<input class="field button2" type="button" value="Clear form" size="10" onclick="clearAll(this);">

antd disable all other Checkboxes when single selected

import { Checkbox } from 'antd';
import { useState } from 'react';

export default function App() {
    const [checkList, setCheckList] = useState(['A', 'B', 'C', 'D']);
    const [isSelected, setIsSelected] = useState();

    const onChange = (e) => {
        if (e.target.checked) {
            !isSelected && setIsSelected(e.target.name);
        } else {
            setIsSelected(null);
        }
    };

    return checkList.map((item) => (
        <Checkbox disabled={isSelected ? isSelected !== item : false} name={item} key={item} onChange={onChange}>
            {item}
        </Checkbox>
    ));
}

You can create a state and set the checkbox key in that state. I use name attribute and assign each checkbox with item (Assuming that checkList state have unique elements or keys) get the key from the onChange Event of each checkbox and then i get the value of name from e.target + checkbox value from e.target.checked. I checked is isSelected state is not null then store the key. I each checkbox, check the disabled attribute where i check if we have any key in isSelected state and that key is not same as the checkbox key, it will be disabled otherwise it will only be selected checkbox.

Disable button if one of the checkboxes are not checked

You have to trigger change of checkboxes.

Simply checking both checkboxes have checked or not, will work only on the loading of document. You have to repeat this process each time the checkbox status is changed.

I have modified your script a little bit.

Logic

• Select all checkboxes using document.querySelectorAll('input[type="checkbox"]').
• Add a change event on checkbox by looping this list using forEach.
• Inside the change event, find the count of selected checkboxes.
• If that matches to the length of total check box, enable the button, or disable it.

const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
  cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
  const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
  submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();    

<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />

<button type="button" id="startusing-button">CreateSubscription</button>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      aSelected: props.selectedValue == 'a',
      bSelected: props.selectedValue == 'b',
    };
  }

  handleCheckboxChange = (e) => {
    const { checked, value } = e.target;
    if (value == 'a') {
      this.setState({ aSelected: checked });
    }

    if (value == 'b') {
      this.setState({ bSelected: checked });
    }
  };

  render() {
    return (
      <div>
        <input
          type="checkbox"
          value="a"
          onChange={this.handleCheckboxChange}
          defaultChecked={this.props.selectedValue == 'a'}
          disabled={
            this.state.aSelected ||
            (!this.state.aSelected && !this.state.bSelected)
              ? false
              : true
          }
        />

        <input
          type="checkbox"
          value="b"
          defaultChecked={this.props.selectedValue == 'b'}
          onChange={this.handleCheckboxChange}
          disabled={
            this.state.bSelected ||
            (!this.state.aSelected && !this.state.bSelected)
              ? false
              : true
          }
        />
      </div>
    );
  }
}

ReactDOM.render(<App selectedValue='a'/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

$(form).submit(){
         $('.verification5').removeAttr('disabled');
}