42

I want to enable or disable checkbox in table's row on basis of condition.

code - 

<td><input type="checkbox" name="repriseCheckBox" disabled={checkStat == 1 ? true : false}/></td>

if checkStat = 1, need to disable checkbox else keep it enable.

It's not working. It disabling all the checkboxes. Any suggestions ?

nOw2
  • 616
  • 7
  • 12
anirudha
  • 620
  • 1
  • 5
  • 12

6 Answers6

55

If you specify the disabled attribute then the value you give it must be disabled. (In HTML 5 you may leave off everything except the attribute value. In HTML 4 you may leave off everything except the attribute name.)

If you do not want the control to be disabled then do not specify the attribute at all.

Disabled:

<input type="checkbox" disabled>
<input type="checkbox" disabled="disabled">

Enabled:

<input type="checkbox">

Invalid (but usually error recovered to be treated as disabled):

<input type="checkbox" disabled="1">
<input type="checkbox" disabled="true">
<input type="checkbox" disabled="false">

So, without knowing your template language, I guess you are looking for:

<td><input type="checkbox" name="repriseCheckBox" {checkStat == 1 ? disabled : }/></td>
Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264
2
<input type="checkbox" value="" ng-model="t.IsPullPoint" onclick="return false;" onkeydown="return false;"><span class="cr"></span></label>
rangholiya nikunj
  • 137
  • 1
  • 11
1

The HTML parser simply doesn't interpret the inlined javascript like this.

You may do this :

<td><input type="checkbox" id="repriseCheckBox" name="repriseCheckBox"/></td>

<script>document.getElementById("repriseCheckBox").disabled=checkStat == 1 ? true : false;</script>
Denys Séguret
  • 355,860
  • 83
  • 755
  • 726
  • There is no `getElementByName` method. It is a plural method and returns a node list, not an element. – Quentin Aug 16 '12 at 13:30
  • @dystroy - Thanks for you answer. But, checkbox will repeats in all rows with same id so its disabling all the checkboxs. – anirudha Aug 16 '12 at 15:13
  • 2
    Never give the same id or name to more than one element ! You may use a counter to build dynamic names/id (`String id="repriseCheckBox_"+i++`). – Denys Séguret Aug 16 '12 at 15:29
1

In jsp you can do it like this:

<%
boolean checkboxDisabled = true; //do your logic here
String checkboxState = checkboxDisabled ? "disabled" : "";
%>
<input type="checkbox" <%=checkboxState%>>
Franz Deschler
  • 2,280
  • 5
  • 22
  • 38
-1

According the W3Schools you might use JavaScript for disabled checkbox.

<!-- Checkbox who determine if the other checkbox must be disabled -->
<input type="checkbox" id="checkboxDetermine">
<!-- The other checkbox conditionned by the first checkbox -->
<input type="checkbox" id="checkboxConditioned">
<!-- JS Script -->
<script type="text/javascript">
    // Get your checkbox who determine the condition
    var determine = document.getElementById("checkboxDetermine");
    // Make a function who disabled or enabled your conditioned checkbox
    var disableCheckboxConditioned = function () {
        if(determine.checked) {
            document.getElementById("checkboxConditioned").disabled = true;
        }
        else {
            document.getElementById("checkboxConditioned").disabled = false;
        }
    }
    // On click active your function
    determine.onclick = disableCheckboxConditioned;
    disableCheckboxConditioned();
</script>

You can see the demo working here : http://jsfiddle.net/antoinesubit/vptk0nh6/

Antoine Subit
  • 9,405
  • 4
  • 34
  • 50
-2

I know this question is a little old but here is my solution.

 // HTML
 // <input type="checkbox" onClick="setcb1()"/>
 // <input type="checkbox" onClick="setcb2()"/>

 // cb1 = checkbox 1
 // cb2 = checkbox 2
  var cb1 = getId('cb1'), 
      cb2 = getId('cb2');

  function getId(id) {
    return document.getElementById(id);
  }

  function setcb1() {
    if(cb1.checked === true) {
      cb2.checked = false;
      cb2.disabled = "disabled"; // You have to disable the unselected checkbox
    } else if(cb1.checked === false) {
      cb2.disabled = ""; // Then enable it if there isn't one selected.  
    }
  }

  function setcb2() {
    if(cb2.checked === true) {
      cb1.checked = false;
      cb1.disabled = "disabled"
    } else if(cb2.checked === false) {
      cb1.disabled = ""
  }

Hope this helps!

Mike
  • 31
  • 5