How to read different CSS classes with the same beginning with jquery?

Question

I have this structure on the page:

<div class="sapUiVltCell sapuiVltCell">

    <div class="row">
        <div class="skip-undefined col-1">
            <span id="__button0" class="Handler1 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
                <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"></input>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>
        </div>
        <div class="skip-undefined col-2"> . </div>
        <div class="skip-1 col-2">
            <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false" role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4"></input>
        </div>
    </div>

</div>

What is gonna happen (in theory, didnt put all the code in here, because its SAPUI5) is, that I klick on a radiobutton and I want my textfield to be enabled and the others disabled again (if one was already enabled), up until now I have this structure for the code:

function selectHandler2() {
    $(".Handler2").prop("disabled", false);
    $(".Handler2.sapUiTfDsbl").css({"background-color":"rgb(255, 255, 255)",
                                    "border":"1px solid rgb(191, 191, 191)",
                                    "color":"rgb(191, 191, 191)"});
    $(".Handler1, .Handler3, .Handler4, .Handler5, .Handler6, .Handler7").prop("disabled", true);
    $(".Handler1.sapUiTfDsbl, .Handler3.sapUiTfDsbl, .Handler4.sapUiTfDsbl, .Handler5.sapUiTfDsbl, .Handler6.sapUiTfDsbl, .Handler7.sapUiTfDsbl").css({"background-color":"rgb(251, 251, 251)",
                                    "border":"1px solid rgb(219, 219, 219)"});
};

The classes are generated by SAPUI5. I did each one of these for the 7 different RadioButtons, that activate 7 different textfields.

But now I want to automatize it to only one function selectHandler() instead of 7.

Any ideas would be great.

I believe you're looking for this: http://stackoverflow.com/questions/2668275/jquery-check-if-element-has-a-class-begining-with-some-string — Derek Story, Mar 24 '15 at 14:12
Check out the [starts with selector](https://api.jquery.com/attribute-starts-with-selector/) — Chris, Mar 24 '15 at 14:12
I didn't understand your question, basically you want to get all the elements that start with particular class name ? — Mox Shah, Mar 24 '15 at 14:12
@dwreck08 I need a tip how to code, so the jquery reads the class that starts with "handler" and then save the number at the end and then search through all the inputs for the ones with the same "handler" class. — Osamah Aldoaiss, Mar 24 '15 at 14:16
@MokshShah yeah but on top of that save the number and search through the whole HTML code for a similar class with that class name — Osamah Aldoaiss, Mar 24 '15 at 14:16
Did you mean it? _$("[class*='Handler']").on("click", function(){});_ — , Mar 24 '15 at 14:18
@OsamahAldoaiss Give a little search about _CSS Selector Reference_, and you will found what you can try — , Mar 24 '15 at 14:36

Praxis Ashelin · Answer 1 · 2015-03-24T14:19:10.673

2

You can use the starts with selector from jQuery:

$("input[class^='handler']").click(function(){
    ...
});

Alternatively, you could loop over all the radio inputfields with .each() and bind the event handler accordingly to the class:

// Loop over all radio buttons
$("input[type=radio]").each(function(){

    // Check if class starts with "handler"
    if( this.className.substr(0, 7) == "handler" ){

        // Bind event
        $(this).click(function(){
            ...
        });
    };

});

edited Mar 24 '15 at 14:19

answered Mar 24 '15 at 14:14

Praxis Ashelin

5,137
2
20
46

I want him to only pic the handler class of the clicked radiobutton, how would you change that? – Osamah Aldoaiss Mar 24 '15 at 14:17
Maybe using the [Starts with selector](http://api.jquery.com/attribute-starts-with-selector/) would be better `$("[class^=handler]")` – Rodrigo Siqueira Mar 24 '15 at 14:17
@RodrigoAssis that's indeed the best method. Updated my answer. – Praxis Ashelin Mar 24 '15 at 14:19
@RodrigoAssis yeah that could work to pick the handler class of the selected radiobutton – Osamah Aldoaiss Mar 24 '15 at 14:19
@OsamahAldoaiss You can also use `:checked` in the selector to only get the selected radio buttons. – Praxis Ashelin Mar 24 '15 at 14:21
@OsamahAldoaiss Also look at the [not](http://api.jquery.com/not/) selector, so you can do what you want with all the elements but the current one. `$("[class^=handler]").not( this ) ....` – Rodrigo Siqueira Mar 24 '15 at 14:22

Jamie Barker · Accepted Answer · 2015-03-24T15:03:14.940

You can do this with a click listener on the radios and using the next function:

$('.row input[type="radio"]').on('click', function() {
    $('.row input[type="text"]').prop('disabled', true); //disable all text input
    $('.row input[type="radio"]').not(this).prop('checked', false); //uncheck other radio
    $(this).next('.row input[type="text"]').prop('disabled', false); //enable the current input
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div>
    <input class="handler1" type="radio"/>
    <input class="handler1" type="text" disabled="disabled"/>
  </div>
</div>
<div class="row">
  <div>
    <input class="handler2" type="radio"/>
    <input class="handler2" type="text" disabled="disabled"/>
  </div>
</div>
<div class="row">
  <div>
    <input class="handler3" type="radio"/>
    <input class="handler3" type="text" disabled="disabled"/>
  </div>
</div>

EDIT: Inputs in separate divs

function ActivateInput(el) {
  $('.row input[role="textbox"]').prop('disabled', true); //disable all text input
  $(el).parent().parent().parent().find('input[role="textbox"]').prop('disabled', false); //enable the current input
}

$('.row input[type="radio"]').on('click', function() {
  ActivateInput(this);
});

ActivateInput($('.row input[type="radio"]:checked'));

.row div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sapUiVltCell sapuiVltCell">
  <div class="row">
    <div class="skip-undefined col-1"> <span id="__button0" class="Handler1 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
            <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"/>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>

    </div>
    <div class="skip-undefined col-2">.</div>
    <div class="skip-1 col-2">
      <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false"
      role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4" />
    </div>
  </div>
  <div class="row">
    <div class="skip-undefined col-1"> <span id="__button0" class="Handler2 sapUiRb sapUiRbInteractive sapUiRbStd sapUiRbSel" tabindex="0" style="width:100%;" aria-labelledby="__button0-label" aria-disabled="false" aria-invalid="false" aria-checked="true" role="radio" data-sap-ui="__button0">
            <input id="__button0-RB" type="radio" name="sapUiRbDefaultGroup" tabindex="-1" checked="checked"/>
                <label id="__button0-label" class="sapUiRbNoText" for="__button0-RB"></label>
            </span>
    </div>
    <div class="skip-undefined col-2">.</div>
    <div class="skip-1 col-2">
      <input id="__field4" class="Handler1 sapUiTf sapUiTfBack sapUiTfBrd sapUiTfDsbl" value="" style="width: 50%; direction: inherit; text-align: left; background-color: rgb(251, 251, 251); border: 1px solid rgb(219, 219, 219);" aria-autocomplete="none" aria-multiline="false"
      role="textbox" aria-disabled="true" tabindex="-1" disabled="" data-sap-ui="__field4" />
    </div>
  </div>
</div>

followup question after I buil it in, If the structure of the html code is more complicated, that means when I add another div aroud the inputs or if the inputs are in different divs, how would you change the code? — Osamah Aldoaiss, Mar 24 '15 at 14:41
Please put your exact generated HTML structure in your question. — Jamie Barker, Mar 24 '15 at 14:44
exactly this is the case, because SAPUI5 renders them in different divs — Osamah Aldoaiss, Mar 24 '15 at 14:45
@OsamahAldoaiss Amended based upon your **actual** HTML structure. — Jamie Barker, Mar 24 '15 at 15:05
You are great, thank you. This snippet worked and I think from here on I can edit it myself if I have to.^^ — Osamah Aldoaiss, Mar 24 '15 at 15:21

score 0 · Answer 3 · answered Mar 24 '15 at 14:36

Listen to change on radio, get the checked radio's id, disable all fields(loop between ids), enable field with the same id :

var tot_handlers = 7;

// Disable all but the $'(.Handler' + id) one
function enableHandler(id) {
    // disable all fields
    for (n = 1; n <= tot_handlers; n++) {
        $('input.handler' + n + '[type=text]').prop("disabled", true).css({
            "background-color": "rgb(251, 251, 251)",
            "border": "1px solid rgb(219, 219, 219)"
        });
    }
    // enable the good field
    $('input.handler' + id + '[type=text]').prop("disabled", false).css({
        "background-color": "rgb(255, 255, 255)",
            "border": "1px solid rgb(191, 191, 191)",
            "color": "rgb(191, 191, 191)"
    });
}

// Suggestion to get id id of the checked field
$('input[type=radio][class^=handler]').on('change', function(){
    var $checkedradio = $(this), id;
   for (n = 1; n <= tot_handlers; n++) { 
       if($checkedradio.is('.handler' + n)) { id = n; break; }
   }
   enableHandler(id);
});

Demo : https://jsfiddle.net/ufwkehtz/2/

You should add a name attribute to those radios. – leonsaysHi Mar 24 '15 at 14:37 — leonsaysHi, Mar 24 '15 at 14:37

jyrkim · Answer 4 · 2015-03-24T17:47:11.743

0

Updated, How about this one, which responds to radio button clicks that have class name starting with 'handler':

$(document).on("click", "input[class^='handler'][type='radio']", function () {
    $rb = $(this);
    var inputSelector = $rb.attr("class");
    inputSelector = "input[class='"+inputSelector+"'][type='text']";
    $input = $(inputSelector);
    if ($rb.checked == false) {
      
        $input.attr("disabled", true);
        $("input[class^='handler'][type='text']").not($input).attr("disabled", false);
        
    } else {
  
        $input.attr("disabled", false);
        $("input[class^='handler'][type='text']").not($input).attr("disabled", true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
    <div>
        <input class="handler1" type="radio" name="handler" checked></input>
        <input class="handler1" type="text" value="radio 1 input text"></input>
    </div>
</div>
<div class="row">
    <div>
        <input class="handler2" type="radio" name="handler"></input>
    
    </div>
</div>
<div class="row">
    <div>
        <input class="handler3" type="radio" name="handler"></input>
        <input class="handler3" type="text" disabled="disabled" value="radio 3 input text"></input>
    </div>
</div>
<br>
    <input class="handler2" type="text" disabled="disabled" value="radio 2 input text"></input>

edited Mar 24 '15 at 17:47

answered Mar 24 '15 at 14:42

jyrkim

2,849
1
24
33

How would you change the code, if the two inputs are not in the same div? (Unfortunately this is how SAPUI5 renders the elements) – Osamah Aldoaiss Mar 24 '15 at 14:44
@OsamahAldoaiss After looking at the accepted answer, I must comment that this one works quite similarly as both answers use the next() function to identify the text element. More info: https://api.jquery.com/next/ + btw, in your question you didn't specify the requirement you just commented. Anyway, this answer was just an alternative way of doing it, and I had fun :-) – jyrkim Mar 24 '15 at 14:52
Thanks for your answer it was similar yeah, but like I commented in the other answer, the SAPUI5 system makes a quite complicated rendered structure (check my question for an updated structure) – Osamah Aldoaiss Mar 24 '15 at 14:54
@OsamahAldoaiss cheers for the feedback, I haven't used the SAPUI5 but it looks great - I've seen the demo, but I don't know the details of it - sorry. – jyrkim Mar 24 '15 at 14:57
@OsamahAldoaiss Hi, after having a break I realized that my answer wasn't too far off from the SAPUI5 requirements, so I made some changes that might work in that environment. So I updated some parts of the code. I hope you find it okay :-) – jyrkim Mar 24 '15 at 17:49

How to read different CSS classes with the same beginning with jquery?

4 Answers4

EDIT: Inputs in separate divs