CODEWITHSUNDEEP
javascriptreactjscheckboxreact-bootstrap
Shubham Khatri
Shubham Khatri

Reputation: 281854

Default checked checkbox not toggling on click

I am using Reactjs. I am working on creating a Modal form using Modal from react-bootstrap. I created a form using bootstrap. The form contains the checkbox that needs to be checked by default. So I used the checked property for the input checkbox. But the checkbox doesn't toggle when I click on it. I can't quite figure out the problem. Here is my code: 

<Modal show={this.state.showModal} onHide={this.closeModal}>
<Modal.Header closeButton>
    <Modal.Title>Create New User</Modal.Title>
</Modal.Header>
<Modal.Body>

    <form class="form-horizontal" name="newUser">
        <div class="form-group">
            <label class="control-label col-md-4" for="userName">User Name</label>
            <div class="col-md-6">
                <input type="text" class="form-control" id="userName" ref="userName" placeholder="User Name"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="password">Password</label>
            <div class="col-md-6">
                <input type="password" class="form-control" id="password" ref="password" placeholder="Enter Password"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="password">Confirm Password</label>
            <div class="col-md-6">
                <input type="password" class="form-control" id="confirmPassword" ref="password" placeholder="Re-enter Password"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="email">Email Address</label>
            <div class="col-md-6">
                <input type="email" class="form-control" id="email" ref="email" placeholder="Email Address"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-4 col-md-6">
                <div class="checkbox-inline">
                    <label><input type="checkbox" id="enabled" ref="enabled" value="enabled" checked/> Enabled </label>
                </div>
                <div class="checkbox-inline">
                    <label><input type="checkbox" id="locked" ref="locked" value="locked" /> Locked </label>
                </div>
            </div>
        </div>
    </form>
</Modal.Body>
<Modal.Footer>
    <Button onClick={this.submitUser} bsStyle="primary">Confirm</Button>
    <Button onClick={this.closeModal} bsStyle="warning">Cancel</Button>
</Modal.Footer>
</Modal>

Here is Modal Image. Thanks for help in advance.

Upvotes: 1

Views: 3837

Answers (2)

Rishijay Shrivastava
Rishijay Shrivastava

Reputation: 559

In my case I felt that "defaultChecked" was not working properly. So I used "checked" with "onChange" for toggling the state.

Eg. 

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

Upvotes: 2

user1341315
user1341315

Reputation: 115

Watch console log, React usually saying a lot of how to do with your components. In this case it says:

Warning: Failed form propType: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. Check the render method of FileList.

So just: defaultChecked={this.state.enabled} instead of checked={this.state.enabled}

Upvotes: 3

Related Questions