How to apply my class from css to checkbox? [duplicate]

Question

I have this working code but why the checkbox is not affecting it?.

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});

.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

Anyone know about this issue or problem?.

@Tushar yes if i click my button not meet the condition that i set — Trafalgar D Law
– Trafalgar D Law, Commented Oct 21, 2016 at 7:32
You can use $('#txt, #chk').toggleClass('validation', $('#txt').val() === '2'); instead of if...else — Tushar
– Tushar, Commented Oct 21, 2016 at 7:43

2 revs · Accepted Answer · 2017-05-23 10:27:31Z

Your checkbox is getting the class (you can tell in the DOM inspector); you don't see the styling because the checkbox border isn't shown.

Some of the answers to this question suggests using outline rather than border for checkboxes; see the new style rule in the example below.

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});

.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
input[type=checkbox].validation {
  outline: 1px solid #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

guradio · Accepted Answer · 2016-10-21 07:32:14Z

1

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('border');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('border');
  }
});

.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
.border {
  outline: 1px solid #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

Use outline

answered Oct 21, 2016 at 7:32

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

Weedoze · Accepted Answer · 2016-10-21 07:33:53Z

Acutally your checkbox is getting the class. Use your browser inspector to see it. The background-color alone has not effect on the checkbox.

To show you I change the cursor. Put your mouse on the checkbox then click on the button and put your mouse on it again.

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});

.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
  cursor: wait;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

Collectives™ on Stack Overflow

How to apply my class from css to checkbox? [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related